[Resolved] alignment of menu element

[Tim]

Hello, I have a menu element that I’d like to be justified left so that it aligns more properly next to the hamburger menu. How can I do this?

[Tim]

Also, when I added this element it really messed up the sticky menu. Can you help so that the sticky menu layout is the same as the main layout with just the red background?

[Leo]

Hi Tim,

What is the menu/header layout you are trying to achieve?

Everything on the left with the logo in the center?

This would make it very left heavy I think.

Let me know 🙂

[Tim]

I’d like Hamburger and weather element on the left, logo centered, and everything else (phone, how to find, book) on the right.

[Fernando]

Hi Tim,

Thank you for clarifying. Let’s first address where it’s added so we can fix how it looks on all views properly.

How are you adding this Weather Widget? Is it a Block or a Shortcode. In any case, can you try adding it through a Block or Hook Element, and hook it to menu_bar_items.

Hook Element: https://docs.generatepress.com/article/hooks-element-overview/
Block Element: https://docs.generatepress.com/article/block-element-hook/

Let us know once you’ve done so, and we’ll take a look.

[Tim]

It’s with a block element and shortcode within that block. I had it as inside navigation but now just added it as Menu_bar_items

[Fernando]

Great!

This is what I’m seeing on Desktop view:

Header: https://share.getcloudapp.com/DOukWEPL
Sticky Nav: https://share.getcloudapp.com/E0uR6eJn

Are these correct?

On Mobile, Having both “How to find & Book…” on the Right won’t fit. Do you have an alternative in mind? Having just the Book Now button may work.

[Tim]

No. I want the weather to be to the right of the hamburger menu. Then everything mirror on the sticky nav.

[David]

Hi there,

how is the Weather element being generated ?
As the opening HTML is a naked DIV:

<div>
<div id="splw-location-weather-pro-5734" class="splw-main-wrapper" data-shortcode-id="5734" data-location="{&quot;autoLocation&quot;:&quot;&quot;}" data-custom-field="0">

It would be handy if that div wasn’t there or had its own class that we could target.

[Tim]

It’s using the weather location plugin.

[David]

1. Change this CSS:

.site-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
}

to:

.navigation-branding,
.site-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
}

2. Add this CSS to move the weather to the left, and remove the crazy amount of margins and padding it has lol

.inside-navigation div:not([class]) {
    margin-right: auto;
}
.inside-navigation #splw-location-weather-pro-5734.splw-main-wrapper,
.inside-navigation #splw-location-weather-pro-5734.splw-main-wrapper :is(.splw-pro-wrapper, .splw-pro-body, .splw-pro-header) {
    margin-bottom: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-top: 0;
}

[Tim]

Thank you! This is looking much better!

The weather is still to the left of the hamburger menu.

Also, the sticky menu has everything to the left of the logo. Can we mimic what it has for the main menu but just with the red background?

[David]

Now add this CSS:

.menu-bar-item {
    order: -1;
}
.menu-bar-items {
    margin-right: auto;
}

[Tim]

Looks great! Now whats the best way to hide the weather item on mobile?

[David]

You can try this:

#mobile-header .menu-bar-items > div:not([class]) {
    display: none;
}

[Author]

Posts