[Resolved] Header Widget Float Right on Mobile

Home Forums Support Header Widget Float Right on Mobile

  • This topic has 14 replies, 2 voices, and was last updated 3 months ago by David.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1185262
    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!!

    #1185284
    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.

    #1185345
    David
    Staff
    Customer Support

    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);
    }
    #1185378
    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!

    #1185568
    David
    Staff
    Customer Support

    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

    #1185761
    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.

    #1186059
    David
    Staff
    Customer Support

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

    #1186085
    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?

    #1186111
    David
    Staff
    Customer Support

    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.

    #1186120
    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.

    #1186135
    David
    Staff
    Customer Support

    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.

    #1186155
    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.

    #1186321
    David
    Staff
    Customer Support

    Try this CSS to remove the left hand auto margin:

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

    Seem to have done the trick! Thanks!

    #1186856
    David
    Staff
    Customer Support
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.