reducing height of sticky menu

[Holdingsapp]

Hey Meteorite!

1) How can I eliminate the extra height of the sticky header? I prefer the size of the header after it has been scrolled, not the extra padding when the site first loads.

I’ve tested using height:xxx as well as padding:xxx but the sticky header stays the same size (until i scroll)…

[Veena]

Pls share a link to your site, we will suggest you the required custom CSS.

[Holdingsapp]

This reply has been marked as private.

[Veena]

Pls try the below custom CSS in themeoptions –

#primary-menu > ul.menu > li > a {
    line-height: 60px;
}
#header > .inner > .wrap {
    min-height: 60px;
}
#site-logo {
    top: 10px;
}
#header-spacer {
    height: 60px !important;
}

[Holdingsapp]

This reply has been marked as private.

[Veena]

The custom CSS is not affected it seems. Could you pls provide admin rights? We will help you out.

[Holdingsapp]

ok. I have made you an administrator.

[Veena]

Looks like the custom css has some issues, the > symbol is getting converted into

>

Any css you enter after that symbol gets ignored actually since

>

is invalid css.
It is happening after when we save the custom CSS changes. So for now we have entered the custom CSS in style.css ,We will release an update to address this issue. So for the time being its better to upload the childtheme and move all the custom CSS there.
Thanks for your understanding.

[Holdingsapp]

Ok, thanks. Guess I’m glad I could help find a bug!

Thanks for making the change in my site.

1. Can you tell me what you did so I understand better?
2. And when you push out that update (next week, six months from now), will I have to undo the changes you’ve made to be compatible with the new version?

[Veena]

1. We have added the below custom CSS in file style.css.

#primary-menu > ul.menu > li > a {
    line-height: 60px;
}
#header > .inner > .wrap {
    min-height: 60px;
}
#sidebar-header .button { top: 5px; }

Since it contains ‘>’ symbol.
The issue is that when we save the custom CSS the ‘>’ we have used is getting converted to

>

which is an invalid symbol in css, inorder to prevent this modification we put the above custom CSS in file style.css.
You can check this change in your themeoptions > custom CSS.

2.The custom CSS which we have entered in style.css will lose after themeupdate since all the files get replaced with new files.
By using a child theme you will ensure that your modifications are preserved. (Also the custom CSS that you have added in Themeoptions > custom CSS is retained after themeupdate)

[pricebill]

This is exactly the question I have BUT I’m using the Agile theme. Where shall I put this custom CSS when using the Agile theme? Style.css too? And if so; where? Thanks.

dropgage.com

[Raghavendra]

You can know more about child theme here – http://www.wpbeginner.com/wp-themes/how-to-create-a-wordpress-child-theme-video/.

Basically you need to edit the style.css part of the child theme and make the change. If you are not using child theme, you can use custom/custom.css file to make changes but be aware that any updates to the theme will overwrite these changes and hence you need to have a backup of this file every time you update the theme.

If you need to make the height of the header same as the one that shows up on scrolling (sticky header), pls paste the below custom CSS into custom/custom.css file or the child theme style.css file –

h1#site-logo {
    top: 0;
}

#primary-menu > ul.menu > li > a {
    line-height: 50px;
    font-size: 16px;
}

[Author]

Posts