Split menus into two separate lists

[jregist]

I’m trying to replicate the functionality of the menus on this page: https://harrisondesign.com/portfolio/residential.

Notice how the menus become two separate stacked lists when the screen is at a reduced size. I also need to swap the logo out for a lighter colored one on certain pages. And overlay the menu on top of a full-screen image carousel on the landing page.

I realize this is likely two separate issues. But if you could point me to an example of making the nav two different unordered lists, that would be a great start.

[Elvin]

Hi,

This documentation can help in what you’re trying to achieve.
https://docs.generatepress.com/article/centering-logo-navigation/

If you’re starting from scratch, consider using “Split” from one of our Site Library templates.
Here’s a demo of it. http://gpsites.co/split/

A wise man once said:
"Have you cleared your cache?"

[jregist]

Thanks, Elvin. I already have that in place. My issue is that I need to do style the list-items in a very specific way. If you notice on the page – https://harrisondesign.com/portfolio/residential – the three items on the left side and the three items on the right side always remain centered over the left and right images in the three-wide grid on that page. And then when the page gets less than 1100 or so pixels wide the two lists change their styles and are stacked vertically (rather than being spread horizontally).

I would love to make this work in a single list, but I just don’t see how without changing this to something that creates two separate unordered lists, one for the left of the menu and the other for the right. I’ve looked at some examples of using the Hooks Element to do this but I am not sure how best to proceed, particularly how to override the desktop nav without affecting mobile.

Thanks for any suggestions.

[Elvin]

This can be achieved with custom CSS.

That said, can you link us to the site you want this replicated on so we could check?

You can provide the site details on the Private Information textarea. Thank you.

A wise man once said:
"Have you cleared your cache?"

[jregist]

Thanks Elvin. The site is at gfa.wishfulthinking.us. The https://gfa.wishfulthinking.us/residential/ page has the three across image grid. The left and right menu items should always be centered over the left and right images in that grid.

Joel

[Elvin]

Can you edit your reply to remove your site details, i.e. passwords/site url? Adding credentials on your reply is security a security risk as it is visible to the public.

You can add them in on the Private information window so only the support team can see it. Thank you.

A wise man once said:
"Have you cleared your cache?"

[jregist]

Done. Thanks!

[Elvin]

Great, thanks.

To answer the question:

You’re right that we may have to split the menu into 2 parts.

To do just that, follow these steps:

1.) add this PHP snippet to your site:

function register_custom_menus() {
  register_nav_menus(
    array(
      'before-logo' => __( 'Before Logo' ),
      'after-logo' => __( 'After Logo' )
    )
  );
}
add_action( 'init', 'register_custom_menus' );
add_action( 'generate_before_logo', function(){ wp_nav_menu( array( 'theme_location' => 'before-logo' ) ); } );
add_action( 'generate_after_logo', function(){ wp_nav_menu( array( 'theme_location' => 'after-logo' ) ); });

The purpose of this code is for creating a menu location that will display on the left and the right side of the logo.

Here’s how to add PHP – https://docs.generatepress.com/article/adding-php/

2.) After adding the PHP, create 2 menus. 1 each for left and right.
3.) For the left menu, set its location to “Before Logo”.
4.) For the right menu, set its location to “After Logo”.
5.) Add this CSS:

div.menu-split-left-container,div.menu-split-right-container{
		width:100%;
		text-align:center;
}
ul.menu li.menu-item {
    padding: 0 10px;
}
ul.menu {
    list-style:none;
		display: flex;
		justify-content: center;
		margin-bottom: 0;
		margin-left: 0;
}
.menu-split-left-container {
    margin-right: auto;
}
.menu-split-right-container {
    margin-left: auto;
}

@media(max-width:1119px){
ul.menu li.menu-item {
    padding:0;
}
ul.menu {
    flex-direction:column;
}
}

Here’s how to add CSS – https://docs.generatepress.com/article/adding-css/

After fully accomplishing these things, here’s the output – DEMO SITE

A wise man once said:
"Have you cleared your cache?"

[jregist]

Oops. Thought I’d replied earlier to this. I made the changes you describe but for whatever reason Primary Nav is showing up on the page, as well. I see the new split nav (which needs to be formatted), but for some reason, another nav is showing up on the page.

[jregist]

I just hid that rogue menu by using

#primary-menu {
display:none;
}

Let me know if there’s another way to fix that.

[jregist]

Ok I have the branding of the fonts and general appearance close to where I want it. However, I’m not sure how to proceed getting the left and right nav elements to remain centered over the image on the left and the image on the right of the grid on /residential. Earlier I was having trouble getting this to remain in this position relative to the images in the grid on larger screens. Can you let me know the best way to achieve this? Thanks!

[Tom]

Hi there,

Try adding this:

.navigation-branding {
    flex-grow: 1;
}

.menu-right-main-nav-container {
    width: 35%;
}

.navigation-branding .site-logo {
    width: 30%;
}

.menu-left-main-nav-container {
    width: 35%;
}

.navigation-branding img {
    margin: 0 auto;
}

Then if you decrease your Container Width value (Customize > Layout > Container) to match the width of your content, everything should align.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[jregist]

Thought I responded to this the other day — guess I need to check that I’m actually logged in.

I don’t think this approach to use % widths on the menu containers is going to work. If you look at my reply #1519718, you’ll see precisely what I’m trying to do. Basically each of the three menu containers — the left, logo and right — need to stay centered over the three columns on the Residential (/residential) page. I have experimented with using vw to do this, but am having difficulty keeping everything lined up when I go from my laptop browser (approximately 1502 pixels wide) to my larger monitor (1920 pixels wide). That page at Harrison design (https://harrisondesign.com/portfolio/residential) is the example my client wants to follow.

Any suggestions would be greatly appreciated.

Thanks!

[Tom]

Did you give the CSS I provided a shot? It should do what you’re after I think.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[jregist]

That should be up there now. It doesn’t seem close to me. Maybe I’m missing something of have some other conflicting CSS? You can check it at https://gfa.wishfulthinking.us

[Author]

Posts