Headline Placement

  • Resolved jdavidstark

    (@jdavidstark)


    4 years, 12 months ago

    When enabling the option for “Mobile Nav on Desktop,” the position of the mobile menu is calculated in one way. But the position of the site header is calculated differently. So the two don’t line up horizontally.

    Could there either be (a) an option to adjust the position of the site header according to the mobile menu position or (b) an update to the “Mobile Nav on Desktop” option that would include this alignment?

    I’ve played around with trying to resolve the site header placement via custom CSS, but that hasn’t turned out too well thus far.

    Thank you so much for your help!

    The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author Oliver Campion

    (@domainsupport)

    4 years, 12 months ago

    Hello,

    Interesting, can you please enable “Mobile Nav on Desktop” on your site so that we can see what you are talking about in context?

    We’ll then be able to provide a temporary CSS fix whilst we look into a permanent solution.

    Many thanks,

    Oliver

    Thread Starter jdavidstark

    (@jdavidstark)

    4 years, 12 months ago

    Sure. You can view with the mobile menu on at this link.

    Thanks so much for your help!

    Plugin Author Oliver Campion

    (@domainsupport)

    4 years, 12 months ago

    Please add this CSS to “Customizer – Additional CSS” …

    @media only screen and (min-width: 822px) {
.menu-button-container #primary-mobile-menu {
padding-right: 0;
}
}

    Let me know if that does what you require.

    Oliver

    Thread Starter jdavidstark

    (@jdavidstark)

    4 years, 12 months ago

    It doesn’t seem to. It looks like that CSS adjusts the horizontal position of the menu button container, not its vertical position relative to the site header. Here’s an updated preview of what happens when that media query is inserted.

    Thanks so much for your help!

    Plugin Author Oliver Campion

    (@domainsupport)

    4 years, 12 months ago

    So the two don’t line up horizontally.

    Sorry, I’m confused, your original post mentions the horizontal positioning.

    Please advise.

    Oliver

    Plugin Author Oliver Campion

    (@domainsupport)

    4 years, 12 months ago

    Further to my last message, to adjust both vertical and horizontal spacing, use this instead …

    @media only screen and (min-width: 822px) {
.menu-button-container #primary-mobile-menu {
padding-right: 0;
}
.menu-button-container {
margin-top: -25px;
}
}

    The issue is being caused by the padding and margins on the button rather than the position of the header and / or the button.

    Let me know if that works for you.

    Oliver

    Thread Starter jdavidstark

    (@jdavidstark)

    4 years, 12 months ago

    Ah, my apologies. What I was meaning was that the headline and the menu button don’t line up on the same horizontal line across the screen, which would indeed be a vertical spacing issue. 🙂

    This latest snippet does move in the right direction and appears to resolve the issue on the front end. However, when logged into the dashboard, the admin menu seems to displace the menu button (see here).

    That’s not a huge deal, but it would be helpful to see the same thing when logged in as displays to folks on the front end.

    Would there be a good way to fix that?

    Thread Starter jdavidstark

    (@jdavidstark)

    4 years, 12 months ago

    As a related issue, it would be helpful to have the mobile menu close button appear in the same place as the hamburger button. I think I’ve got the vertical (up-down) placement ironed out. But at screen widths of 822px or greater, I’m having trouble sorting out how to change the horizontal (left-right) placement.

    Would you have any thoughts about that adjustment too?

    Plugin Author Oliver Campion

    (@domainsupport)

    4 years, 12 months ago

    The admin bar issue can probably be negated by using this …

    @media only screen and (min-width: 822px) {
.menu-button-container #primary-mobile-menu {
padding-right: 0;
}
.menu-button-container {
margin-top: -25px;
}
.admin-bar .menu-button-container {
margin-top: -57px;
}
}

    Placing the close icon in the same place as the hamburger could be tricky. It would require the content of the modal to have margins that equal the margins of the content of the site for all relevant screen sizes.

    It might be possible to do this by modifying the padding-left and padding-right of .primary-navigation > .primary-menu-container but you won’t be able to use the usual “alignwide” class because the .primary-menu-container is absolutely positioned.

    Oliver

    Plugin Author Oliver Campion

    (@domainsupport)

    4 years, 11 months ago

    Marking the original post as now “resolved”.

    Oliver

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘Headline Placement’ is closed to new replies.