-
Posts
-
Hello,
I wish to make the header small on my site. For instance when you scroll down and the header follows and gets smaller, that is the size I would like it constantly.
Does anybody know if this would be simple to change, how it could be done and most importantly would it work well with the responsiveness of the site?
site: http://rerral.com
Thanks for any help :)
Hi Torlock,
Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:
.social_header #header_main .container, .social_header .main_menu ul:first-child > li a {
height: 116px;
line-height: 116px;
}And modify each value to 58px.
Regards,
Devin
Hello I have added the code above but it resulted in this outcome…
And when users scroll down the menu gets even smaller rather than staying the same size. Like in the picture below:
Hi,
@Torlock: Please reload the page a few times. It looks fine on my end. The code Devin gave you will change the height of the header. It has nothing to do with the menu.
Regards,
Ismael
Hello thanks for the reply.
The reason it looks fine at the moment is because I took the changes down due to the fact it wasn’t looking good.
I understand the menu won’t change but what I am looking for is a header that doesn’t change size. So it always stays at 58px in height even when you scroll.
Devins code seemed to be along the right lines but the header gets smaller when scrolling and there although it shortens the header there is a dark space still present so in actually the header is still the same size.
Hard to explain without being visual but if you compare the screenshots above with the site how it is now you will get a clearer picture.
Thanks for all the help :)
If you want to force it then you just change it to:
.social_header #header_main .container, .social_header .main_menu ul:first-child > li a {
height: 116px !important;
line-height: 116px !important;
}You’ll want to add that into the custom.css inside the desktop only media query however and not just into the quick css so that it only effects desktop viewers and doesn’t incorrectly add issues to your mobile menu setup.
Unfortunately that code is the same as the first (which also didn’t work). And putting it in the desktop media query section of custom.css doesn’t seem to do anything. I can see it is somewhat the right code however the header still gets smaller as it follows the page.
My aim is to have a header that is 58px in height consistently even when the user scrolls.
I have also tried to change the same code in the layout.css file but it doesn’t seem to have any affect either, even after clearing the cache or trying a different browser.
The code does however seem to work in the Edit CSS section provided by JetPack, but it makes the border and logo move but not the rest. I notice that in inspect element that you have the div id “main” and just above the div class “header_bg” but there seems to be nothing in between to edit the bottom section of the header. Trouble is that is the bit that needs moving upwards.
I think it might be the menu items that need shortening because they stay at 116px in height when the rest moves upward.
Hi,
Please add this on your custom.css or Quick CSS. This will make the header 58px in height consistently.
/*default header: main logo and main menu height. increase max value if you want to use a bigger logo*/
#header_main .container, .main_menu ul:first-child > li a{ height:58px !important; line-height: 58px !important; }
/*header with social icons: */
.social_header #header_main .container, .social_header .main_menu ul:first-child > li a { height: 58px !important; line-height: 58px !important; }
/*header with social icons and bottom nav */
.bottom_nav_header.social_header #header_main .container{height: 58px !important; line-height: 58px !important;}
.fixed_header #main {
padding-top: 58px;
}Regards,
Ismael
Hello Ismael,
That code is perfect. The only problem is that black section still just below the menu. I have searched through the code alot but I can’t seem to find it anywhere.
Usually in inspect element you can find any section of a site but it completely skips over that section. I shall leave it up like this for a few days so you can see it for yourself. You will see the menu and then a little section below it they seems impossible to get rid of.
Thanks for all the help so far though :)
If you are shrinking the header then you also need to bring up the main container:
.fixed_header.social_header #main {
padding-top: 90px;
}Hello,
Thanks alot this is perfect!
Just incase anybody else is trying to do the same thing here is the final code that worked for me. (Add it to your Custom CSS or if you have Jetpack in the Edit CSS section under appearance).
@media only screen and (min-width: 768px) {
/*default header: main logo and main menu height. increase max value if you want to use a bigger logo*/
#header_main .container, .main_menu ul:first-child > li a {
height: 58px !important;
line-height: 58px !important;
}
/*header with social icons: */
.social_header #header_main .container, .social_header .main_menu ul:first-child > li a {
height: 58px !important;
line-height: 58px !important;
}
/*header with social icons and bottom nav */
.bottom_nav_header.social_header #header_main .container {
height: 58px !important;
line-height: 58px !important;
}
.fixed_header #main {
padding-top: 58px;
}
.fixed_header.social_header #main {
padding-top: 90px;
}
}
- The topic ‘Making header smaller.’ is closed to new replies.