[Support request] sticky header padding

Home Forums Support sticky header padding

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1393496
    Sky

    My sticky header doesn’t seem to have the same padding as the “regular” header. So, if the browser’s narrower than the container width, the logo and menu are butt up against the sides of the browser window and the header appears wider than the content. Is there setting I”m overlooking or do I have to add custom css to get the same right/left padding as the “regular” header?

    https://rdusdev3.wpengine.com/

    #1393843
    David
    Staff
    Customer Support

    Hi there,

    The alignment looks correct to me – did you resolve the issue ?

    #1394301
    Sky

    No, sorry, it’s a little hard to see on that page, since there’s not much content — you have to squeeze the browser to be narrower than the container AND activate the sticky menu — note how the logo and nav have no side padding in this screen grab:
    2020-08-09_10-39-20

    #1394329
    David
    Staff
    Customer Support

    Aah ok – probably better to enable Navigation as Header in Customizer > Layout > Header.
    Then if need be we can add some padding to both static and sticky navs.

    Let me know.

    #1394559
    Sky

    Hmm, but it is nice to have less top/bottom padding on the sticky nav, so seems like keeping the other settings and just adding padding to the sticky nav would be slightly less css. This seems to work — lmk if you’d handle it differently. Note, I also had to axe the 10px of left margin added to the logo once the browser’s narrower than the container width:

    body #sticky-navigation .grid-container {
    padding: 0 40px;
    }

    @media
    (max-width: 1320px) {
    #site-navigation .navigation-branding, #sticky-navigation .navigation-branding {
    margin-left: 0;
    }
    }

    #1394560
    Sky

    Oops forgot to use the code thingy 😉

    body #sticky-navigation .grid-container {
        padding: 0 40px;
    }
    @media (max-width: 1320px) {
      #sticky-navigation .navigation-branding {
          margin-left: 0;
      }
    }
    #1394980
    David
    Staff
    Customer Support

    Thats a fine method 🙂

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.