Header Widget Float Right on Mobile

[Anthony]

I’m having trouble getting the header widget to align to the right on mobile.

I’m trying to get it to look exactly like it does on desktop, on the mobile.

Thank you!!

[Anthony]

Sorry.

Now I’m having trouble getting the Site Branding to align center.

In the Layout settings, I have the Header set to be centered yet it keeps going right.

I’m basically trying to have
MENU – Site Branding – Header Widget

But the homepage needs to be merged with the Header, and the rest of the pages do not.

[David]

Hi there,

try this CSS:

.site-header .inside-header {
    display: flex;
    flex-direction: row !important;
    align-items: center;
    position: relative;
}
.main-navigation {
    order: -1;
    margin-right: auto;
}
.site-branding {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate3d(-50%, -25%, 0);
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Anthony]

Works great. I still can’t figure out my mobile menu.

On Desktop I have my Parent menu item as “MENU” which drops to three other Sub Menu items.

On Mobile it gives you the Hamburger Icon, then drops down to MENU and then MENU doesn’t drop-down to anything for some reason.

Thanks!

[David]

Could try keeping the Desktop nav on Mobile.

In Customizer > Layout > Primary Navigation you could:

1. Set the Mobile Menu Breakpoint to 0
2. Change the Navigation Dropdown to Click Menu Item

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Anthony]

That’s a bit better.

But for some reason, I can’t get it to stop Stacking once it hits 500px of width (mobile).

The Site Branding, Site Navigation, and Header Widget seem to Stack once it hits 500px

Instead of being Inline.

[David]

I edited the CSS here this should make sure the inside-header maintains a flex row.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Anthony]

Hmm,

Maybe I’ll just abandon this. I can’t seem to get it to work.

For me, with the newly provided CSS, the Menu is still below the Site Branding. And on Desktop my Header Widget Accordion when opened is dragging down the Site-Navigation with it.

Maybe I’ll try and build out a CSS drop-down instead of the Accordion inside the header widget?

I’m basically trying to have

Menu – Site Branding – Header Widget

On both the Desktop and Mobile

Where the Header Widget (at first was an accordion widget) drops down to a contact form on Desktop but on Mobile opens a full Screen Modal with the Contact form (which I plan to just build out with CSS/JS.

Maybe I’m going about it all wrong?

[David]

I would suggest there are better ways of doing it…. but maybe some sacrafices need to be made.

For example you could use the Off Canvas Panel for your Mobile and Desktop menu – this can be displayed with the Hamburger Icon and ‘Menu’ label if needed.

Question what is the end game for the Header Widget ? As we could hook something in here. Let me know.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Anthony]

My client really wants the drop-down menu on mobile. He doesn’t like the off-canvas for whatever reason.

I’m only using the Header-Widget because I’m able to insert a Site-Origin Accordion Widget there (which enables me to have the Drop-Down contact form on Desktop). Which you can see in place currently.

I had a CSS/JS drop-down I created from a W3Schools Tutorial except when you clicked inside the form to fill it out the drop-down kept closing, which is why I decided to use an accordion widget there.

[David]

Yeah – that Accordion is going to cause some pain. May be better if you look at a Pop Up / Modal plugin for the form. Then its just a simple link that needs to be added in its place.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Anthony]

I didn’t think to use a Modal on Desktop too. Maybe just have it pop up right below as if it’s a drop-down perhaps…are you thinking using a Hook instead of the Widget here?

Now I have an element in the after_header_content. I have a div in there that’s set to float: right.

But I still can’t get the Site Nav to be inline on mobile.

See attached. It has a margin: 0 auto; attached to it.

[David]

Try this CSS to remove the left hand auto margin:

#site-navigation {
    margin-left: unset !important;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Anthony]

Seem to have done the trick! Thanks!

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts