Header issues

Shapely
1

Hi,

  1. I am having some problems with the header when i change size of browser window. It become a lot bigger in height(attached pic 2)
  2. The hamburger menu wont open except the first line(pic 3 shows open menu), how do i fix this?
  3. I would like to change header to static instead of sticky, how to achieve it?
  4. Is it possible to make header corners rounded?
  5. How to change sub-menu color and hover colors?
    6: I would like blue color and white when hovered but it shows kind of blue/grey, but when i hover it shows the blue color i want. How do i fix this?

My url: www.miltonbaby.se

Thank you for your help!

Regards

2

Forgot to attach the pics of course :slight_smile:

3

Hi @shakeel,

I hope you are well today and thank you for your questions.

1. I am having some problems with the header when i change size of browser window. It become a lot bigger in height(attached pic 2)

This is happening because you have increased the menu text size therefore when the browser screen size is small and the menu doesn’t have enough space to fit in that position then it moves below the logo.

2. The hamburger menu wont open except the first line(pic 3 shows open menu), how do i fix this?

This is happening because of the following custom CSS code you you have added in your site.

#page .nav-bar .module, #page .nav-bar .module-group {
    height: 85px;
}

To resolve the issue either remove the above CSS code or change it as following.

@media (min-width: 991px){
#page .nav-bar .module, #page .nav-bar .module-group {
    height: 85px;
}
}
3. I would like to change header to static instead of sticky, how to achieve it? 4. Is it possible to make header corners rounded? 5. How to change sub-menu color and hover colors? 6: I would like blue color and white when hovered but it shows kind of blue/grey, but when i hover it shows the blue color i want. How do i fix this?

To help us keep support thread separates could you please create new thread for your other questions here Shapely - Colorlib Support Forum instead of asking them in your single thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.

Best Regards,
Movin

4

Hello Movin,

Thank you for your reply.

  1. How can i fix that problem without having to reduce the menu text size, a CSS code perhaps? Or is it beyond the free support you provide?

  2. Great, works fine. Though, i still do not see the full logo (attached pic)

Thank you for your support!

Regards

5
1. How can i fix that problem without having to reduce the menu text size, a CSS code perhaps? Or is it beyond the free support you provide?

This is not great solution but you can try achieving this using the below CSS code.


@media (min-width: 991px){
  #page .nav-bar .module-group.right {
    width: 75%;
    float: right;
}
}
2. Great, works fine. Though, i still do not see the full logo (attached pic)

Use below CSS code to resolve it.

#page .nav-bar a {
    height: auto;
}
6

Hi,

  1. I reduced the number of items in the menu and problem solved. But i will save this code for future.

  2. I tried the code bu i still dont see the full logo.
    Is there another code conflicting with this perhaps?

Thanks for your support!

Regards

7

Forgot to leave my url in case you need it.
My url: www.miltonbaby.se

Regards

8
2. I tried the code bu i still dont see the full logo. Is there another code conflicting with this perhaps?

You have to also use the below CSS code.

.container.nav-bar {
    max-height: 100%;
}
9

Hi Movin,

You have to also use the below CSS code.

.container.nav-bar {
max-height: 100%;
}

This partially works. It does show the full logo now, but when i reduce the window size the menu folds out automatically and you cant click on it to close it(screenshot 1).
Though, when i reduce it even more it works fine(screenshot 2).

Regards

10

To resolve it try changing that code as following.


.container.nav-bar {
    min-height: 70px;
}
11

Hi Movin,

Solved. Thank you!

Regards

12

You are most welcome here :slight_smile:

13

Hi. Would you, please, forward me with the answer in this topic about sticky header menu + resizable logo in it (left or right)? We need to meet certain requirements of rchp tour 2017 and put their logo on the top if the page. Thus, would like to try your WP themes for this. What are the options for sticky logo?

14

Hi @andys,

Please post a new thread with your request.

Thanks,

Cristian

15

ok!

16

thanks for understanding.

We will answer you there,

Cristian