Header Widget & Slideout Widget Questions

Hi Levi,

give this a shot:

.inside-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.header-widget {
    float: none;
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
    top: 0 !important;
    margin-left: auto;
}

.main-navigation {
    float: none !important;
    margin-left: auto;
    margin-right: auto;
}

You may need to reduce the menu item widths, as the header elements will wrap on smaller screens.

Easiest way to add an image to the top of the slidout menu, would be to create a custom menu link, and use an tag in the menu Label. Let me know.

Thanks again David. That CSS totally did the trick. But may I ask how do I reduce the menu item widths?

Regarding adding an image to the slideout menu, I can see how to add a Custom Link to the slideout menu, but I'm not sure what you mean by using a tag in the menu? Can you give it to me in as layman as you can? =)

Hi again David,

I just noticed that the button gets cut off on mobile. I tried adjusting the margins which helped a little, but I was wondering if you had any suggestions on how to keep the button from getting cut off?

Thanks again. =)

Hi Levi,

I updated the code above, this introduces a wrap around so as the screen gets smaller the elements will occupy new rows, that fixes the issue with middle size screens. Once you have replaced the code i can look at what to do about the mobile menu alignment.

Let me know

Add an image in the menu - so create the custom link and in the Navigation Label do this:

<img src="url/to/my-image.jpg" alt="my menu image" >

Thanks again David.

I added the updated code above and it helped with the button no longer getting cut off. But the logo is no longer centered and leans to the left. Any chance there's a fix for that?

As for the image in the sidebar, I tried putting that code in every field I could find for adding a custom link, but I must be putting it in the wrong place because nothing changed. I think I'll put this one on hold for now. The image at the bottom of the slideout menu is starting to grow on me. =)

OK, is that when viewed on mobile? If so what layout do you think works best for the mobile layout? For the logo to be top and the nav below left and button below right? Let me know

So the image link - edit the menu that you are adding to the side bar in Dashboard > Appearance > Menus. And the create a new custom link and add the <img /> tag to the Navigation label. It will then display as part of the Slideout Nav :)

You have the patience of a saint David. =)

Yes, the alignment issue is only on mobile. Desktop and Tablet are looking dandy. So ideally on mobile, I would like the logo on top, button in the middle, and nav menu at the bottom, and all 3 centered? Seems like the safest option with all the different mobile screen sizes out there.

Regarding the slideout menu, YES, it works. =) However, the logo doesn't seem to be vertically centered. It's a little too high. Any suggestions on getting it vertically centered? And is there a way to vertically center the whole slideout menu?

Thank you again David for your unbelievable patience.

Its a pleasure :)

How about give this a shot. concerned that staking all three elements may eat up half the screen on mobile:

@media (max-width: 768px) {
    .site-logo {
        width: 100%;
    }
    .main-navigation {
        margin-left: 0;
    }
    .header-widget {
        margin-bottom: 0 !important;
    }
}

I can't see the menu logo (just the widget image) in the slideout nav? Caches need clearing maybe.

Sorry for the late reply David. Took an extended Labor Day weekend. =)

The @media code totally did the trick. Love the way the header looks now.

As for the slideout nav, sorry, I forgot I already launched the site and was making updates to the main website. I just updated the staging site so you can see what I mean about the logo being a bit high on the slideout nav. If you have suggestions, I would greatly appreciate it.

Thanks again for your amazing support David.

Hi Levi, hope you had a good weekend :)

Give this a shot for adjusting image position.

.slideout-navigation.main-navigation .main-nav ul li img {
    padding-top: 20px;
}

Thanks again David. Hope you had a nice restful weekend as well.

Worked like a charm sir. =)

Glad i could be of help. :)