[Resolved] Split menus into two separate lists

Home Forums Support [Resolved] Split menus into two separate lists

Home Forums Support Split menus into two separate lists

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #1519628
    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.

    #1519703
    Elvin
    Staff
    Customer Support

    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/

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

    #1519799
    Elvin
    Staff
    Customer Support

    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.

    #1519809
    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

    #1519828
    Elvin
    Staff
    Customer Support

    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.

    #1519847
    jregist

    Done. Thanks!

    #1519913
    Elvin
    Staff
    Customer Support

    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

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

    #1521823
    jregist

    I just hid that rogue menu by using

    #primary-menu {
    display:none;
    }

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

    #1521881
    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!

    #1521974
    Tom
    Lead Developer
    Lead Developer

    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.

    #1527178
    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!

    #1527429
    Tom
    Lead Developer
    Lead Developer

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

    #1527452
    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

Viewing 15 posts - 1 through 15 (of 20 total)
  • You must be logged in to reply to this topic.