Home>Support>Logo in menu, make changes to sticky menu

Logo in menu, make changes to sticky menu

Hi,

I have made som CSS changes to this site, including adding more padding to the logo, and border bootom to the menu. This works nicely.

header#masthead.masthead-logo-in-menu .logo {padding: 22px 0;}

.site-header {border-top-color: #92A5DC; border-top-width: 5px; border-top-style: solid;}

.main-navigation ul li a {padding-right: 35px;padding-left: 35px;padding-top: 33px !important;padding-bottom: 22px !important;border-bottom-color: #f7f7f9; border-bottom-width: 5px; border-bottom-style: solid;}
.main-navigation ul li a:hover {border-bottom-color: #92A5DC; border-bottom-width: 5px; border-bottom-style: solid;}

Is it possible to have a different logo padding when the menu is sticky?

Say for instance, normal menu padding top/bottom 22px and then sticky menu padding top/bottom 12px?

If it is, then I also need to change the main navigation padding-bottom on the sticky menu, is that possible to?

URL: http://wptest01.zkagen-marketing.dk/

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 7 years, 4 months ago Andrew Misplon Hi, I Work Here

    Hi Hans

    Not quite sure I’m with you there. Once the sticky menu is in effect you can’t see the logo. You can target the sticky menu as follows:

    .main-navigation.sticky { }
    

    That class will only apply to the sticky menu which is the menu that comes into effect once you scroll past the regular menu.

  2. 7 years, 4 months ago Hans Christian

    Hi Andrew,

    Please visit URL, this is a different design, than the previous ones that I have asked about :-)

    The logo IS in the sticky menu!

    http://wptest01.zkagen-marketing.dk/

  3. 7 years, 4 months ago Andrew Misplon Hi, I Work Here

    Try the following:

    /* Vantage logo in menu padding */
    
    header#masthead.masthead-logo-in-menu .logo {
    padding: 0 0 0 0;
    }
    

    Change 0 0 0 0 to the px values you want for top, right, bottom, left.

    OR

    to adjust the padding for the bar take a look at the menu padding setting at Appearance > Customize > Menu.

  4. 7 years, 4 months ago Hans Christian

    Hi Andrew,

    Thanks for the feedback. However I can see that I have not been able to describe what I am trying to achieve here.

    The design that this question revolves around, is: Logo in menu.

    I have already found the solution to change logo padding. I have already added extra paddin top/bottom to the logo in the attached URL example.

    This looks nice, but the problem is, that the header now stays this bigger size, even on the sticky header.

    What I am trying here, is to have one set of logo padding top/bottom on the normal header, and another set of logo padding top/bottom in the sticky menu, so that the sticky header “shrinks” compared to the normal header.

    savvy? :-)

  5. 7 years, 4 months ago Andrew Misplon Hi, I Work Here

    So that’s where .sticky comes in. If you inspect the source you’ll see the sticky menu get’s added on the fly and has a class of sticky that the the original menu doesn’t have. So you need to target using that.

    /* Vantage logo in menu padding */
    
    header#masthead.masthead-logo-in-menu .site-navigation .logo {
    padding: 0 0 0 0;
    }
    

    And now for sticky:

    /* Vantage logo in menu padding */
    
    header#masthead.masthead-logo-in-menu .site-navigation.sticky .logo {
    padding: 0 0 0 0;
    }
    
  6. 7 years, 4 months ago Hans Christian

    That’s it!, thanks.

    However, since I also have made changes to the main-navigation, I need to change this also in the sticky header.

    This is the what I have done to the main-navigation normal header:

    /* Menu Padding Horizontal */
    .main-navigation ul li a {padding-right: 35px;padding-left: 35px;padding-top: 33px !important;padding-bottom: 22px !important;border-bottom-color: #f7f7f9; border-bottom-width: 5px; border-bottom-style: solid;}
    .main-navigation ul li a:hover {border-bottom-color: #92A5DC; border-bottom-width: 5px; border-bottom-style: solid;}
    

    Can you help with the correct selectors for the sticky header with these settings:

    /* Menu Padding Horizontal */
    .main-navigation ul li a {padding-right: 35px;padding-left: 35px;padding-top: 23px !important;padding-bottom: 12px !important;border-bottom-color: #f7f7f9; border-bottom-width: 5px; border-bottom-style: solid;}
    .main-navigation ul li a:hover {border-bottom-color: #92A5DC; border-bottom-width: 5px; border-bottom-style: solid;}
    

    With your help Andrew, I am on a fast track to Vantage Mastery here, it is highly appreciated!

    HC

  7. 7 years, 4 months ago Hans Christian

    I found the solution it my self!

    So simple, when I pay attention to what you are saying, thanks.

    /* Menu Padding Horizontal */
    .main-navigation.sticky ul li a {padding-right: 35px;padding-left: 35px;padding-top: 23px !important;padding-bottom: 12px !important;border-bottom-color: #f7f7f9; border-bottom-width: 5px; border-bottom-style: solid;}
    .main-navigation.sticky ul li a:hover {border-bottom-color: #92A5DC; border-bottom-width: 5px; border-bottom-style: solid;}
    
  8. 7 years, 4 months ago Andrew Misplon Hi, I Work Here

    No problem.

    Try this:

    /* Menu Padding Horizontal */
    .main-navigation.sticky ul li a {padding-right: 35px;padding-left: 35px;padding-top: 23px !important;padding-bottom: 12px !important;border-bottom-color: #f7f7f9; border-bottom-width: 5px; border-bottom-style: solid;}
    .main-navigation.sticky ul li a:hover {border-bottom-color: #92A5DC; border-bottom-width: 5px; border-bottom-style: solid;}
    
  9. 7 years, 4 months ago Hans Christian

    LOL, I was faster than you where :-)

  10. 7 years, 4 months ago Andrew Misplon Hi, I Work Here

    Super, glad you’re getting there.

  11. 6 years, 2 months ago thabasti

    @Hans Christian

    How did you manage that the sticky menu doesn’t overlap the main menu ? When I start scrolling, the sticky menu gets activated. –> So when i scroll back to the top this results in a overlapping sticky menu over the main menu :( (I have a different color for the sticky menu)

    thanks in advance

  12. 6 years, 2 months ago Hans Christian

    @thabasti

    Not sure what you mean. Do you have an URL I can look at?

    • 6 years, 2 months ago thabasti

      Unfortunately I don’t have an URL, because the site is not yet online .

      I have the “”logo in menu Option. When I scroll, the Sticky Nav gets activated and shrinks the navigation bar ( exactly like on your website). So far so good. But if I scroll to the top of the page again, the navigation bar stays the same. It won’t get back to the normal size.

      I hope you understand me now. Really appreciate any help on that.

  13. 6 years, 2 months ago Hans Christian

    Okay get what you are saying.

    The function you se on my website is the standard function, I don’t know way that does not happen on your site.

    Sorry.

  14. 6 years, 2 months ago thabasti

    Finally!!!!

    Now i figured out how to show the top navigation, when you scroll to the top of the page again.

    Turned out, that the .site-header border-top enables a “glitch” :D

    @Hans Christian: Unfortunately I missed that piece of css code in your post. I should have better looked more into it.

    .site-header {
      border-top-color: #ffffff;
      border-top-style: solid;
    }
Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More