header height

[mikelynch]

Hi

Could you tell me how I can go about changing the header height please as it is a little too large at the moment and there doesn’t seem to be an option for this.

Also, when I scroll, only the menu items below the logo are remaining sticky – the logo and the top bar menu are disappearing.

Thanks
Mike

[Mohammad – SUPPORT]

Hi,
1-You can use this custom css code:-

#logo {
  height: 55px!important;
  margin-top: -31px !important;
}

2- You can choose another header type to display logo on resize.

Thanks
Mohammad

[mikelynch]

1. Thanks Mohammad, that worked fine.

2. I need to keep this header type in place but for the entire header to remain sticky, not just the bottom set of links. This was working fine a few days ago but seems to have changed without me changing any settings.

Also, In the menu at the top right (SCREEN GRAB ATTACHED), I have set the link to be ‘button style menu item’ but this is not working. I want the rest of the menu items to remain as just text based links.

Thanks
Mike

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
My colleague will assist you shortly.
Thanks
Mohammad

[mikelynch]

Hi Mohammad, I haven’t heard anything yet. I was just wondering of there was a solution available?

Thanks
Mike

[Mohammad – SUPPORT]

Hi,
He will assist you shortly.
Thanks
Mohammad

[Kyle – SUPPORT]

Hi

Add this to your custom css:

.header-wrap {
  position: fixed;
  width: 100%;
}

– Kyle

[mikelynch]

Thanks Kyle that worked perfectly. Could you help me with the other issue I mentioned earlier? I will paste it again here:

In the menu at the top right (SCREEN GRAB ATTACHED), I have set the link to be ‘button style menu item’ but this is not working. I want the rest of the menu items to remain as just text based links. I need the button to appear in black. I have the accent colour set to the same colour as the header background.

Thanks
Mike

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Button style menu items only work for the main menu

– Kyle

[mikelynch]

Ok, thanks Kyle. I have however spoke to soon on the previous fix.

You gave me the below code to ensure the top bar, header and menu items remained sticky. It does remain sticky but the revolution slider below it has now condensed and appears to have moved up below the sticky header before scrolling:

.header-wrap {
position: fixed;
width: 100%;
}

Thanks
Mike

[mikelynch]

Hi Kyle

Just to clarify the above, I have attached an image with a before/after.

The top image is what happens when I insert the code:
.header-wrap {
position: fixed;
width: 100%;
}

This gives me the sticky header, top bar and menu but it cuts off the top of the slider.

The bottom image is how it should look but without the above shortcode, only the links below the logo remain sticky.

Thanks
Mike

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Please re add the css so I can check

– Kyle

[mikelynch]

Hi Kyle, I have now re-added the CSS for you to check.

Mike

[Kyle – SUPPORT]

Add this:

#main-container > .home-slider-wrap {
  margin-top: 150px;
}

– Kyle

[mikelynch]

Hi Kyle

That’s working fine now thank you.

I have attached another query relating to the headers to see if what I am asking is achievable. The details are highlighted in red on the screen grab.

Thanks
Mike

Attachments:

You must be logged in to view attached files.