Take your website
To the next level
Discover our newly launched customization services and elevate your web projects to new heights.
Delegate tasks, save time, and unlock the power of professional WordPress outsourcing.

Okay
  Public Ticket #1956672
Disable Shrink effect on Header Style 3
Closed

Comments

  • Laura started the conversation

    Hi!! I would like to disable the Shrink effect on my Header (I am using header style 3), I would love to have a sticky header with same proportions always.


    Thanks!

  •  7,095
    Oliver replied

    HI!

    pls. use following css:

    body #site-header.fixed.shrink .header-style-3 #primary-menu.no-responsive > li {
        padding-top: 31px !important;
        padding-bottom: 31px !important;
    }

     

    6707465710.png

    Please note if you comment on your ticket before we reply, your ticket will be pushed down of the tickets list. 

    Regards, Oliver

  • Laura replied

    Thanks so much Gregor!!!! Thanks for being so fast too!! 

    Now the anchor is the same, but still changes the appearance... Logo is getting smaller and the menu style changes... Any way to leave it the same thing?

    Thanks a lot in advance!!


  •  7,095
    Oliver replied

    Hi,

    CSS:

    #site-header.fixed.shrink .site-title a img.small {
        opacity: 0;
    }
    #site-header.fixed.shrink .site-title a img.default {
        opacity: 1;
    }
    

    Please note if you comment on your ticket before we reply, your ticket will be pushed down of the tickets list. 

    Regards, Oliver

  • Laura replied

    Hi again!! And thanks again too! Sorry for being so heavy... But, I guess so didn't realize the change in the menu words... I customized them to have an underline with 0px padding right and left, and because of the shrink effect, that line changes and I need it as wide as in the first place, so on, as long as the word. 


    Thanks once again! ;)

  •  7,095
    Oliver replied

    Sorry for possible misunderstanding, you need to remove padding from your code.

    Please note if you comment on your ticket before we reply, your ticket will be pushed down of the tickets list. 

    Regards, Oliver

  • Laura replied

    Is not about that.. I want to keep that padding 0px before and after scroll, when I delete the padding, this is the result, and I would really like to get the underline just as wide as the name of the page, not as wide as the entire button...

    Thanks!! :)



  •  7,095
    Oliver replied

    CSS:

    .header-style-3 #primary-menu.no-responsive > li.menu-item-active >a {
        padding: 0 !important;
    }
    

    Please note if you comment on your ticket before we reply, your ticket will be pushed down of the tickets list. 

    Regards, Oliver

  • Laura replied

    Hi Gregor!! Thanks so much!! It's working perfect on pc, but if you go through mobile phone, logo in header disappears when you do scroll... Anyway to fix the logo in the mobile phone view??

    Thanks!!! Great support!


  •  7,095
    Oliver replied

    HI!

    pls. use following css:

    @media (max-width: 768px) {
    #site-header.fixed.shrink .site-title a img.small {
        opacity: 1;
    }}
    

     

    6707465710.png

    Please note if you comment on your ticket before we reply, your ticket will be pushed down of the tickets list. 

    Regards, Oliver

  • Laura replied

    Thanks!! :)

  •  7,095
    Oliver replied

    Welcome!

    Please note if you comment on your ticket before we reply, your ticket will be pushed down of the tickets list. 

    Regards, Oliver