Topic: Mobile and Tablet Header Layout

Jeff
October 2, 2023 at 7:11 am

Hi there,

I’ve been searching the forums and trying to figure this out but not finding quite what I need to make this work.

I’m pretty happy with my Header/Menu layout on Desktop but think my site needs some work to look good on Mobile or Tablets.

Mobile:
1. I want the Primary Menu hamburger, the site logo and the secondary nav all on the same row
2. I want to move the Primary Nav hamburger to the left
3. The main site logo should be centred, maybe sized a little smaller
4. Secondary Nav on the right. Just the shopping bag icon, I’ve managed to hide the rest of them

Tablet:
1. In Portrait mode, I’m OK if it looks the same as Mobile but would like to bring the Search icon back if possible
2. In Landscape mode, I want it to look like Desktop but would be OK hiding 2 of the Secondary Nav icons (home and account icons in secondary-nav custom CSS class) if necessary

Thanks!
Ying
October 2, 2023 at 9:04 am
Hi there,

For the mobile, enable the mobile header at customizer > layout> header, then we can take another look for the other requests.

For the tablet:

1. Change your mobile breaking point to 820px at customizer > layout > primary navigation.
2. To bring the search back, remove your CSS:
```
      /* Hide Search Icon */
                .gp-icon.icon-search {
                    display: none;
                }
```
3. In landscape mode it should look the same as the desktop already, isn’t it?
Jeff
October 2, 2023 at 10:17 am

Hi Ying!

I’ve enabled the mobile header now. 🙂

1. Changed the mobile breaking point to 820px (why 820px?) but it didn’t seem to make any difference?

2. I was thinking to have Search icon hidden for mobile but show for tablet if possible since we have a little more screen real estate. We can skip this one though.

I do need to narrow the space between the cart and the Search icon though so it is spaced the same as the other secondary nav icons.

3. It wasn’t but I adjusted some padding numbers and now it is. Before it was being pushed to the next line under the first Primary Menu item and right next to the site logo.

Just re-pasting the mobile header items here for easier reference.

Mobile:
1. I want the Primary Menu hamburger, the site logo and the secondary nav all on the same row
2. Move the Primary Nav hamburger to the far left
3. The main site logo should be centred, maybe sized a little larger
4. Secondary Nav on the far right. Just the shopping bag icon, I’ve managed to hide the rest of them.

Thanks!
Jeff
October 2, 2023 at 10:31 am

OK I figured out numbers 1 and 2 for mobile. Just need 3 and 4.

And when I say I figured it out, I mean I found another one of yours or David’s or Leo’s posts and got it from there! 🙂
Jeff
October 2, 2023 at 10:44 am

Just figured out #3! 🙂

Jeff

October 2, 2023 at 11:38 am

This is what I have so far:

/* MOBILE MENU LAYOUT */
@media(max-width: 820px) {
	/* Hide Home and Account Icons */
	.secondary-nav {
  	display: none;
	}
	
	/* Hide Search Icon 
	.gp-icon.icon-search {
		display: none;
	} */
	
	/* Move Primary Nav to Left */
	.main-navigation.has-branding .menu-toggle {
    order: -1;
	}
	
	/* Center Site Logo */
	.site-logo {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
  }
	
	#mobile-header .site-logo.mobile-header-logo img {
    height: 44px;
	}
}

So what I’m still trying to get is:
1. Need to narrow the space between the cart and the Search icon so it is spaced the same as the other secondary nav icons.

2. How do I keep the Primary Nav to far left on mobile sticky menu?

Jeff
October 2, 2023 at 12:03 pm
Figured out #2:
```
.main-navigation.navigation-stick.is_stuck .menu-toggle {
	order: -1;
}
```
Just this left:
1. Need to narrow the space between the cart and the Search icon so it is spaced the same as the other secondary nav icons (desktop/mobile)
Fernando
October 2, 2023 at 6:09 pm
Hi Jeff,

You can add this code inside your @media query:
```
span.menu-bar-item.wc-menu-item a {
    padding-right: 5px;
}
```
You can change the value to your liking.
Jeff
October 2, 2023 at 7:45 pm
Hi Fernando,

Thanks for your reply. So I was using an Element with the following code to display Home and Account icons with a hook for generate_menu_bar_items before. This worked, but it was kind of a custom secondary menu with just those 2 items and then the cart and search icons showed beside it. They were close, but not all together as part of the same menu, and then it caused the spacing issue with the Search icon.

<div class=”secondary-nav”>
<i class=”fa-solid fa-home”></i>
<i class=”fa-solid fa-user”></i>
</div>

I’ve changed my site a bit and put them all into the secondary navigation using some code snippets. So right now the Secondary menu is looking exactly the way I want it to.

However, the Primary Menu is no longer centred like it was so need to fix that.

This was my previous CSS for the Primary Nav menu but it’s no longer working 🙁
```
@media(min-width: 820px) {
		nav#site-navigation {
  	width: 100%;
	}

	div#primary-menu {
		margin-left: auto;
		margin-right: auto;
	}
}
```
Goal is to have the site icon to the left where it is, the secondary nav to the right where it is, and the Primary Nav centred between the two.
Jeff
October 2, 2023 at 8:17 pm

I went back to using the hook plus your code above outside of the media query and that worked!

Thank-you so much for your help. Will mark this one as resolved and open a new one if I run into anything else.

Thanks again!
Fernando
October 2, 2023 at 9:32 pm

You’re welcome, Jeff!

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Mobile and Tablet Header Layout