Move Mobile Toggle Below Logo

Support
#1

Hello. I’m trying to drop the menu toggle below the logo, only at 480px and smaller. Is there a way to do this?

http://aanda.co/adamsjones/home

Thanks!

#2

Hi @applesandarrows,

Thank you for reaching out to us. I see you’re using Pro so you can add another bar with a navigation element and use Hide During Breakpoints feature to hide the bar above 480px (see screenshot)

Then you can hide your actual navigation element below 480px (see screenshot)

Hope this helps!

#3

Not exactly. I’m able to create the mobile-only header, but I can’t get the menu toggle to drop below the logo, even though I have the bar and container setup as a column.

#4

Hi @applesandarrows,

Please set the Flex Layout setting of the container to Column then that should display the image and the Navigation Layered element stacked to each other.

Hope this helps.

#5

That doesn’t seem to be working.

#6

Hi @applesandarrows,

I have checked further and it is because of the CSS block:

Since the element is set absolute to the area, it remains on the right all the time. Did you add the CSS code in the Element CSS? If so, try wrapping the code in a media query like this:

@media (min-width: 480px) {
   $el.x-anchor-toggle {
        position: absolute;
        right: 10px;
    }
}

You will also have to update the height of the bar on mobile when the toggle falls below the logo to accommodate the two elements in the area.

If you are still not able to make it work, please provide us with the admin access to your site in a Secure Note:

#7

I completely forgot I had that CSS added. :man_facepalming:t2:

That fixed it!

#8

Glad to hear that. :slight_smile:

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.