adjusting logo size and menu causes problems with sticky menu

motomarketing · November 2015

I wanted the logo bigger and the menu to align center to the logo. I saw from previous threads to do the following:

#Top_bar #logo {
height: 90px !important;
padding: 20px 0px !important;
}

#Top_bar .menu_wrapper { margin-top: 35px !important; }
.header-classic #Top_bar .top_bar_right { top: 35px !important; }

However, in doing so, the sticky menu is messed up when you scroll down.

Albert · November 2015

Hi,

above css apply for sticky header as well. To do it properly, please use below css instead:

#Top_bar:not(.is-sticky) #logo {
   height: 90px !important;
   padding: 20px 0px  !important;
}

#Top_bar:not(.is-sticky) .menu_wrapper { margin-top: 35px !important; }
.header-classic #Top_bar:not(.is-sticky) .top_bar_right { top: 35px !important; }

motomarketing · November 2015

Thank you so much! However, I noticed after using that CSS code though, there is a large space between the logo and the slider only when viewed on mobile phones: [Links visible only for registered users]

Albert · November 2015

So to remove that space on smaller devices, please wrap above css into @media for larger screens only. So the whole code should look as below:

@media only screen and (min-width: 1024px) {
   #Top_bar:not(.is-sticky) #logo {
      height: 90px !important;
      padding: 20px 0px  !important;
   }

   #Top_bar:not(.is-sticky) .menu_wrapper { margin-top: 35px !important; }
   .header-classic #Top_bar:not(.is-sticky) .top_bar_right { top: 35px !important; }
}

grinshteynluba · November 2015

Thank you

Albert · November 2015

No problem

motomarketing · November 2015

Thank you very much! One last issue I'm noticing... since I've adjusted the menu, the drop down portion is too far away: [Links visible only for registered users]

Albert · November 2015

You can control it's position with below css:

#Top_bar .menu li ul { top: 80% !important; }

motomarketing · November 2015

Perfect! Thank you.

Albert · November 2015

You're welcome

bluebirdofficesupplies · April 2017

How to control the drop down position if the menu is sticky?

Bryan · May 2017

@bluebirdofficesupplies Please send a link to your website and explain exactly what do you mean by control the position.

Thank you

bluebirdofficesupplies · May 2017

If I set the drop menu to mega menu there's a big gap between the sticky main menu and mega menu drop down.

Here's the screenshot.
[Links visible only for registered users]

Our website is www.bluebirdonline.net, though the menu is currently set to drop down since it is live.

The code given in november 2015: #Top_bar .menu li ul { top: 80% !important; }

Work perfectly with a regular dropdown menu. But I would just like to know how to do the same thing if its a sticky menu with mega menu for it's drop down.

Bryan · May 2017

Please set the megamenu. Then we will check the code and see what is happening.

thank you

bluebirdofficesupplies · May 2017

I am not able to set the mega menu for too long becase the mega menu cannot be clicked due to the big gap from the main menu when it's sticky. The website is live and customers are ordering so the best option I can do is to provide a screenshot.
[Links visible only for registered users]

Bryan · May 2017

I cannot check what is happening if you do set it. I need to inspect the code, a screenshot is useless in this case. It will not take long if you set it right away and lets us know.

bluebirdofficesupplies · May 2017

I will set it up tonight since I'm seeing that you're responding early in the morning (2:43 am based on the time stamp of your response in my end). Thank you.

Bryan · May 2017

Well, I just was there and there is no spaces:
Chrome: [Links visible only for registered users]
Mozilla firefox: [Links visible only for registered users]
Explorer: [Links visible only for registered users]

What OS and browser are you using? Is this happening on all resolutions?
There is one console error you should fix: [Links visible only for registered users]
This might be also the cache plugin that mimified the code.
Also, open the page in firefox and press CTRL+U to see the code, you have many errors marked in red. You need to fix those, screen: [Links visible only for registered users]

bluebirdofficesupplies · May 2017

I did say sticky mega menu sir.
[Links visible only for registered users]

I do hope that you got the code anyway since I have to return it to normal now.

Bryan · May 2017

No sorry, you would have to enable it again. And try to fix those errors.

bluebirdofficesupplies · May 2017

Ok sir. I will have it enable again tonight.

Bryan · May 2017

The menu is normal not the mega menu, but probably the problem is caused by your search form. We do not use this search form. You can use ours in the top right bar, go to theme options>header&subheader>extras

See the screen: [Links visible only for registered users]

thanks

bluebirdofficesupplies · May 2017

Hi. It's not gonna be possible for me to use the default search for the theme because I am searching on a different website since our cms is hosted somewhere else. Anyway, the custom search box is indeed the cause of the misalignment of the mega menu on sticky mode. Thank you.

adjusting logo size and menu causes problems with sticky menu

Comments

This website uses cookies