Header / Nav Customizations

Hi Matt,

For tablet, you mean like this?
https://share.getcloudapp.com/DOumD2e6

If yes, add this CSS:

@media (max-width:1024px) and (min-width:769px){

    .header-wrap {
        display: flex;
        flex-direction: column;
    }

    header#masthead,
    nav#site-navigation  {
        width: 100%;
    }

    header#masthead {
        order: 1;
    }

    button.menu-toggle {
        order: 2;
    }

    .menu-bar-items {
        margin-left: auto;
    }

}

For mobile:

You may have to hook in a new button on your generate_inside_navigation.

We then style it in a way that it only appears on mobile. and then style the current button you have to only appear on tablet and desktop.

Hi again,

I've made some progress with this, but run into an issue on tablet and mobile layouts on a few pages.

On this page http://drhedberg.dev.onpressidium.com/autoimmune-thyroid/ the header / nav looks good on various size screens, large to small.

However, on this page (and other archives) http://drhedberg.dev.onpressidium.com/blog/, on tablet the green button is cut in half; and on mobile, the site title is cut off.

Both the pages linked have merged headers but with slightly different settings. The first page linked has a page hero element, whereas the archive pages have none. Not sure what's causing the issue. Any ideas?

Thank you!

However, on this page (and other archives) http://drhedberg.dev.onpressidium.com/blog/, on tablet the green button is cut in half; and on mobile, the site title is cut off.

This occurs because the parts of the header doesn't flow naturally.

It's always tricky to use position: absolute; to super impose elements on the site because you won't be able to get a 1 top value for viewport resize.

That's actually why, on my previous reply, I recommended having 2 buttons instead of super imposing the button for the purpose of using just 1 button for both viewports.

Consider creating the same button on a Block Element and hook it to generate_inside_navigation. This way we won't have to bother about top property calculation as we don't have to super impose the button. All we'll have to bother w/ is the layout using flexbox properties and display block/none.

Ok, so if I understand you correctly. I've added a block element button with the hook suggested. It's currently set to show on Tablet only, as I added a button inside the off canvas panel for phones.

I've set the header widget button to only show on desktop. Do i have that right?

Thanks for your patience.

Matt

Ok, so if I understand you correctly. I’ve added a block element button with the hook suggested. It’s currently set to show on Tablet only, as I added a button inside the off canvas panel for phones.

I’ve set the header widget button to only show on desktop. Do i have that right?

Ah yes that works too. That's actually better in my opinion that it's inside the canvas then there's no need to set custom CSS because it's effectively already hidden by default and only shows up when needed when you open the canvas. It made the design look cleaner.

But yeah, if you must do the initial layout from your previous screenshot in consideration to its purpose(as it seems to be a call-to-action button), the position absolute CSS must be removed and you'll have to have 2 buttons alternating displays between different viewports. :D

Got it, thanks Elvin.

No problem. :D