mobile nav display using mega menu

[Teresa Edmisten]

I am using the mega menu – love it on larger screens. I have given a name for the navigation on mobile browsers but that nav is not showing up on the phone….kind of a deal breaker.

Can you help?

my url is http://dhpc.org if you want to see it in action.

[Bill Robbins]

Teresa,

Good question. The mega menu can be a bit overwhelming for smaller devices, so we created a separate navigation menu location just for them.

To use it, go to the Appearance section and select Menus. In the top left of this screen you’ll the available “locations” for navigation menus. What you’ll want to do is create a menu and then assign it to the “mobile” location.

Once you’ve done that, when the screen size is smaller, the mega menu will be replaced by a select option that when clicked will open up the menu for your visitors.

If you’d like to see it in action, shrink down your browser while looking at the demo and you can see it swap out.

If you need help creating a navigation menu, there’s a quick video in the video section here.

Let me know if you have any trouble,
Bill

[Teresa Edmisten]

The video was very clear. Thanks. Where is the control for the menu button color on the mobile page menu? I don’t see it but know it is probably there.

Also, is there a way to turn off search on mobile location (I have it enabled in the top menu through the template options). It forces the menu button to the 2nd line and it looks clunky.

You have been so responsive and helpful. Thanks.

[Bill Robbins]

It looks like I’m missing an option for that. I’ll add that in the next update. Until then you can change it this way:

1. Go to the Theme Options page and select the Styling tab.
2. Scroll down to the Custom CSS box and paste this:

   
   @media only screen and (max-width: 767px) {
   	
   	select.tinynav {
   		color: #ffffff !important;
   		background-color: #5d777e;
   	}
   
   	#nav-right {
   		display: none;
   	}
   
   }
   

3. Then replace the #fffff with the color code you’d like to have for the text and the #5d777e with the color code you’d like to have for the background.
4. Save your changes.

That should change the color of the mobile menu highlight for you. The second part of that style will also hide the search box on smaller displays.

Let me know if you need any help,
Bill

[Teresa Edmisten]

That worked like a charm. You are so responsive! I really appreciate it.

Now I am getting picky and probably annoying….is there a way to reduce the distance between the top nav and the scrolling page section on the mobile site? There’s a lot of white space and I would like to reduce it. Maybe due to the logo being sized to fit width makes the space around it seem out of proportion…

Not sure that will make sense…the space looks pretty good on the full version site.

[Bill Robbins]

You can adjust that too. Add this to your Custom CSS box too and see if that doesn’t help the flow a bit.

@media only screen and (min-width: 401px) and (max-width: 767px) {

	#logo {
		top: 90px;
	}
	
	#wrap {
		margin-top: 220px;
	}
	
}

@media only screen and (max-width: 400px) {

	#logo {
		top: 80px;
	}
	
	#wrap {
		margin-top: 150px;
	}
	
}

Hope that helps out a bit,
Bill

[Author]

Posts