[Resolved] Site logo Centering on Sticky Menu

Home Forums Support Site logo Centering on Sticky Menu

  • This topic has 3 replies, 2 voices, and was last updated 1 year ago by Tom.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1232043
    Ian

    Hi
    At my site I have managed to center my logo which looks fine.
    I also have sticky navigation on but the logo is on the left despite the break in the menu to make position for it.

    I read the topic at https://generatepress.com/forums/topic/sticky-nav-and-mobile-version-issues-with-logo-centered-navigation/

    But when I swap out the .site-branding, .site-logo for .navigation-branding, .site-logo code as instructed the regular menu loses the logo and just leaves a gap.

    Also I have a top banner that displays and hides most of the sticky menu – it does not affect the main menu header (pushes it down as you want).

    How can I get both logos to show up centered?
    Could you give me an idea of best breakpoint value to use?
    Could you tell me how to move the sticky menu down to make provision for the top sign-up bar from Optinmonster?

    Thanks
    Ian

    #1232868
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    For the centering issue, replace this:

    .site-branding, .site-logo {
        position: absolute;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        z-index: 200;
    }

    With this:

    .site-branding, .site-logo, .sticky-navigation-logo {
        position: absolute;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        z-index: 200;
    }

    The top banner is an issue since you’re using the sticky navigation only when scrolling up. If you want to always show the sticky navigation, we can likely use some CSS.

    Otherwise, you may need to move the banner.

    #1233325
    Ian

    Hi
    That works a treat.

    As for the banner I’d rather have that there on all the pages – it is less obtrusive than other solutions unless you have ideas.

    So what are the choices?
    Having the sticky menu all the time instead of just on upscroll?
    Using CSS to move it down under the baanner while the banner is there?
    Always showing sticky navigation – for which we may as well just use the regular header and navigation since they are practically the same?

    Thanks
    Ian

    #1234221
    Tom
    Lead Developer
    Lead Developer

    Having the sticky menu all the time would likely allow us to fix the issue with CSS.

    There isn’t a way to fix it using the sticky on scroll up at the moment, unfortunately.

    It doesn’t look like the banner is on the site right now – let me know when you re-add it and I can help with the CSS 🙂

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