Keep one navigation link to right of header

Hi Michelle,

Go to customizer > layout > primary navigation, set the Mobile Menu Breakpoint to 0.

Thank you, Ying. I did this, but on mobile, the link drops below the logo instead of staying in place on the right. I'm halfway there though.

Hi Michelle,

To confirm, would you like these two side by side as well?: https://share.getcloudapp.com/Wnuyxrl2

And, would you like your Sticky Nav like this on mobile: https://share.getcloudapp.com/bLuKkw0P

Kindly let us know. Hope to hear from you soon. :)

Yes. I would like it to stay side-by-side for every size. I'm planning to use this site for tablet and mobile only anyway, a pseudo app of sorts. This is why I am styling it to look more app-like.

I see. If that’s the case, with your current setup, kindly go to Appearance > Customize > Layout > Primary Navigation, and set the Menu Item Width on mobile to 0 as such: https://share.getcloudapp.com/nOuRPn4p

After that, kindly try adding this CSS:

@media (max-width: 768px) {
    /* CSS in here for mobile only */
    img.header-image.is-logo-image {
        height:30px;
        width:auto;
    }
    .inside-header.grid-container {
        flex-direction:row;
    }
    .inside-header.grid-container .site-logo {
        margin-bottom:0;
    }
    .inside-header.grid-container span.menu-label {
        white-space:nowrap;
    }
}

Kindly let us know how it goes. :)

Much better! Any chance the button link could be moved a bit more to the right? And the logo?

To confirm, have you tried setting this to zero?: https://share.getcloudapp.com/12ug4KDg

This can be found in Appearance > Customize > Layout > Primary Navigation.

Try modifying the Header Padding in Appearance > Customize > Layout > Header after this: https://share.getcloudapp.com/v1ugY4mm

Make sure that the view is set to mobile. It would be good to check Tablet view too.

Kindly let us know how it goes. :)

I made sure it was set to zero.

I used these settings https://share.getcloudapp.com/v1ugY4mm and the spacing was very strange. I did set the view to mobile...
I uploaded a screenshot onto the home page. I must have something in the CSS that conflicted.

I am trying to follow your instructions to a "T". I think maybe the problem is in the code.

I see. Sorry, I forgot you already set the Mobile Menu Breakpoint to 0.

Can you try modifying it on Desktop view and see if it works?: https://share.getcloudapp.com/E0ugA4LW

Kindly let us know how it goes. :)

I played with the settings some more. The biggest logo issue is the sticky navigation menu, after scrolling. When the sticky mobile nav kicks in, the logo moves flush left. I thought I'd "cheat" and just added more white space on the left side of the logo image, and then uploaded it. It didn't do much. Generatepress is too smart to trick. LOL.

I can still see the padding from my end. Can you try clearing any caching mechanism set in your website?

If however you’re okay with this padding, with your current structure, taking into account the padding you have set on the Menu Item, you can try adding this CSS:

nav#sticky-navigation img.is-logo-image {
    padding-left:51px;
}

nav#sticky-navigation li.menu-item a {
    padding-left:0
}

Kindly let us know how it goes. :)

Nice, thank you.

You’re welcome Michelle! Feel free to reach out anytime you’ll need assistance with anything else. :)