reducing height of sticky menu

Tagged: 

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #17133
    HoldingsappHoldingsapp
    Member

    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)…

    #17151
    VeenaVeena
    Moderator

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

    #17162
    HoldingsappHoldingsapp
    Member
    This reply has been marked as private.
    #17178
    VeenaVeena
    Moderator

    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;
    }
    
    #17251
    HoldingsappHoldingsapp
    Member
    This reply has been marked as private.
    #17256
    VeenaVeena
    Moderator

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

    #17258
    HoldingsappHoldingsapp
    Member

    ok. I have made you an administrator.

    #17274
    VeenaVeena
    Moderator

    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.

    #17278
    HoldingsappHoldingsapp
    Member

    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?

    #17281
    VeenaVeena
    Moderator

    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)

    #19439
    Pricebillpricebill
    Participant

    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

    • This reply was modified 4 years, 11 months ago by Pricebillpricebill. Reason: needed to
    #19478
    RaghavendraRaghavendra
    Moderator

    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;
    }
    
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.