-
Posts
-
Is there any way to keep the header / top navigation the small size that occurs during the scroll?
Regular nav / header: http://gyazo.com/8106d907c8f36c9c905ec4f0dff1397e
Nav / Header when scrolled: http://gyazo.com/740f88186018972bc5abf846dd5a0de0We’d prefer to have the nav / header the exact same size at the top of the page, as it is when it’s scrolled.
Is there a way to change the header to look like this?
REF: http://gyazo.com/740f88186018972bc5abf846dd5a0de0
This is basically what we want for the main navigation throughout the entire website. Hopefully this is possible.Thanks
Hi DaveL77!
Please add following code to Quick CSS in Enfold theme options under Styling tab
.fixed_header #main { padding-top: 44px; } #header_main .container, .main_menu ul:first-child > li a { height: 44px!important; line-height: 44px!important; } .logo, .logo a, .logo img { max-height: 44px!important; }Flush browser cache after applying the code and refresh your page a few times
Best regards,
YigitThis isexactly what I was looking for. However, when I add this code, there is a gap between the main header and the breadcrumb div. It also messes up the mega menu. wwwtest.securit360.com
Ref: http://gyazo.com/dc15dc66466272824d7ae6490793afaf
Unless you’re talking about the arrows that get mis-aligned in the mega menu… then you are correct, those are not aligned properly.
Thank you!!!!
http://gyazo.com/ef2dcda29eb37af8eb75a62d7ee3d8c4
Only thing wrong is the arrows are mis-aligned.
If there is a way to re-align the arrows on the mega menu then everything is perfect.Yes, I haven’t been able to find out how to do that correctly. I tried removing main menu and child item from the css, but it moves stuff around and doesn’t look the same on multiple browsers.
Also notice, the other thing is the white gap between the menu div and the breadcrumb div.
Hey!
@davel77 I checked the website you have previously posted and it looks fine on my end. Please try to flush browser cache and refresh your page a few times.
@andrewdalaniz Please add following code to Quick CSS as well.fixed_header.social_header #main { padding-top: 81px; }Best regards,
YigitThanks Yigit! That fixes the gap. The last thing is the alignment in the megamenu, hover over about us and the services menu items.
Hey!
@davel77 sorry now i saw what you meant. Please add following code to Quick CSS as well.avia_mega_div .avia-bullet { margin-top: 22px; }Cheers!
YigitHey!
@andrewdalaniz and this should fix it for you.avia_mega_div .avia-bullet { margin-top: 25px; }Best regards,
YigitYigit, that lined up the arrows perfect! Only a couple minor things. In the sub menu of the about us menu, the list item is not centered vertically.
Second there is a little too much space between items in the megamenu under services. Can that space be reduced?
Hi!
Please remove the first code i posted in this topic as well as the code i posted to fix the bullet issue and add following code to Quick CSS instead
#header_main .container, .main_menu ul:first-child > li > a { height: 44px!important; line-height: 44px!important; } .logo, .logo a, .logo img { max-height: 44px!important; }This should solve it. I targeted wrong class on the first code i posted, sorry :)
Cheers!
Yigithmm, that fixed the menu and the logo, but the whole div is too big with that one. :/ I think the code you had there was better, we just need the code to adjust the alignment in the menu.
- The topic ‘Keep header one "small" size?’ is closed to new replies.