[Resolved] Split Template, WooCommerce, Search in Navigation, Mobile Logo Size

[Simon Burley]

Hi,

I hope you can help me please. I’m new to Generate Press and GP Premium. I’m currently near to completing a website redesign based on the Split template and I have the following issues which I need to resolve with your help please . . .

1) We are using WooCommerce with the Cart / Basket icon displayed in the header/navigation. This defaults to the far right as I am sure you are aware. However, since this cart icon has been added the ‘Search’ icon in the Split template header/navigation gets displaced to overlapping/underlapping the site logo on mid and smaller screen sizes. Can you tell me how to remove the Search icon/option please, and also how to float it right in conjunction with the Cart icon please? I’d like to know both options so that I can choose the best when I see them in place.

2) On smallest screen size (mobile size) in the preview window in Customise, the hamburger menu touches the site logo. Can you tell me how to resize the logo specifically for the mobile and mid/tablet sizes please?

3) In the mid-sized/tablet sized version of the site, the menu items (text) overlap/underlap the logo. Can you tell me how to resolve this please? I guess the ideal solution may be to introduce the hamburger menu at an earlier point for mid-sized devices. Can you tell me how to do this please?

Many Thanks,

Simon

[Tom]

Hey Simon,

Any chance you can share the URL to your website? It will help me see the exact issues we need to fix.

You can edit your topic to include the URL privately.

Let me know 🙂

[Simon Burley]

Thank you Tom,

I’ve edited and included the URL, but it is password protected (plus can be a bit temperamental when trying to login (can take about three or four tries before it accepts the username and password). What’s the best way to get the login details to you privately?

Thank you

[Leo]

You can use Account Issue form here:
https://generatepress.com/contact/

Make sure to include the topic URL.

Thanks!

[Simon Burley]

Thank you Leo, I’ve sent them now :o)

[Tom]

1. I’m not seeing the overlapping issue with the cart and search icons, but I am seeing your menu items overlapping the logo. This is because you have too many menu items added for this centered logo layout, unfortunately.

You’ll want to either:

a) Implement more sub-menus
b) Remove less important menu items, and add them elsewhere. The footer can be a good place for this (like this website we’re on).

2. This would be for a very small phone, but you could try this:

@media (max-width: 400px) {
    .mobile-menu {
        display: none;
    }
}

3. This is the issue I mentioned in #1. Unfortunately, there really isn’t a workaround other than keeping only essential items in the primary navigation.

[Simon Burley]

Thank you for your help Tom,

Regarding the overlapping/underlapping of the search icon (magnifying glass) and the logo, (which only happened since the addition of the cart icon as mentioned), this only happens when the hamburger menu is on the screen. So can you tell me how to remove the search icon please as I can do without it in the menu.

Regarding the overlapping of the menu items/text and logo, yes I get that there are too many items in the menu, I was just wondering if there was a quick fix rather than delving into the css? But if not then no worries, I’ll bung some css in the child theme’s stylesheet and try to sort it out. Or I might look at remaking the top bar / header using the other technique in your docs.

Will be great if you can let me know about removing the search icon please as the option which I thought would be in Appearance > Customize > Layout > Primary Navigation to turn this on and off doesn’t seem to be there. Is there something special about the Split template in this regard?

Thanks man,

Simon

[Tom]

Ah, I see the search icon issue – sorry about that. Looks like something I need to fix in the site import.

If you want to just remove the search icon, the option should definitely be in Customize > Layout > Primary Navigation: https://www.screencast.com/t/StQkNyRzdCk

[Simon Burley]

You top man! Thank you very much Tom, I can’t believe I didn’t see that there!

[Tom]

No problem! 🙂

[Simon Burley]

Hi Tom,

Thanks again for your help. Could you let me know how to make the hamburger menu come into effect at a larger screen size please? I’ve tried adding the media query css from this page https://docs.generatepress.com/article/mobile-navigation/ but it doesn’t seem to work with the Split template. Or, and PREFERABLY please, can you tell me how to make the menu centre underneath the logo when the screen size reaches a certain size please; just like your logo does on this site. Again, I can’t see how to get this working using the Split template.

Thank you,

Simon

[Tom]

Hey Simon,

Give this a shot:

@media (min-width: 769px) and (max-width: 1240px) {
    .site-logo {
        position: relative;
        left: 0;
        -webkit-transform: none;
            -ms-transform: none;
                transform: none;
    }

    .menu-item-separator {
        display: none;
    }

    .inside-header {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

    #site-navigation {
        width: auto;
    }

    .main-navigation .main-nav ul li a {
        font-size: 13px;
        padding: 0 10px;
    }

    .menu-item-has-children .dropdown-menu-toggle {
        padding-right: 10px;
    }
}

[Simon Burley]

Thank you Tom,

That’s perfect for the first size change and would be the solution but it broke the lower sizes . . .

1024 px, perfect Thank You: https://snag.gy/Ofih7a.jpg

Slightly lower size (arrows are pushed down, happy to go to hamburger menu at this point instead, if you can let me know how to do this then I’d be very grateful): https://snag.gy/rQwJ12.jpg

Tablet portrait (logo and menu have moved to strange position): https://snag.gy/hiGlJQ.jpg

Mobile (logo and menu have moved to strange position): https://snag.gy/Jbgr0P.jpg

As you can see from the above notes all I need is to make the hamburger menu appear at a screen size before the bug occurs which pushes the submenu arrows down, and also just to return the lower sized headers to how they were before the new css please (same as on the Split template https://gpsites.co/split/, with the menu left, logo centre, basket icon right). If you can tell me how to do this then it will be much appreciated.

Thank you,

Simon

[Tom]

I just updated the CSS above – can you give it another shot?

Let me know 🙂

[Simon Burley]

Absolutely Brilliant! Thank You!

All the Best,

Simon

[Author]

Posts