Horizontal Menu Below Hero

[Ryan Hennesy]

I’m trying to make a menu that runs across the page but is positioned below the Hero section on the home page. I want for it to contain different links than the header menu (and some graphic customization would be fantastic).

I thought about trying to manipulate the Connect Boxes, but they’re clearly not designed to run five blocks across, which is how many menu items I’m trying to include.

I tried creating a second menu, but it doesn’t appear that I have the option to place an actual menu where I’d like on the homepage. When I put it in the widget, it appears as a vertically-oriented list menu as though it only belongs in the sidebar.

Thanks for your help.

[Bill Robbins]

Good Morning Ryan,

Excellent question there. You can do that. WordPress has a widget called Custom Menu that lets you select any navigation menu to display. The theme will turn that into a list of links, but we can change the styling to make it a navigation bar.

What I would suggest is create the menu in your menu builder (Appearance > Menus). Then add the Custom Menu widget to the Home One section on your home page. Make the only widget there. That should get the menu on the home page. Now here’s how to turn it into a navigation bar:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   .home .widget_nav_menu {
   	padding: 0;
   }
   
   #home-one {
   	padding: 0;
   }
   
   .home .widget_nav_menu ul {
   	text-align: center;
   	margin: 0;
   }
   
   .home .widget_nav_menu ul li {
   	display: inline-block;
   	padding: 15px 20px;
   }
   
   .home .widget_nav_menu ul.sub-menu {
   	display: none;
   }
   

3. Update your settings.

That should change the list into a horizontal row of links. You can style this section using the customizer (Appearance > Customize). You could set a different background color, link color and hover color for your links there to give it style.

If you run into any questions or trouble, just let me know.

Thanks,
Bill

[Ryan Hennesy]

Thanks. Works great.

Is there a way to make the menu extend across the screen like the Connect Boxes, as opposed to constrained like the Contact Widget?

I’m attaching a screenshot to show you what I mean.

[Bill Robbins]

Hey Ryan,

See if this doesn’t get you closer to where you want to be:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   
   #home-one .widget {
   	width: 100%;
   }
   
   #home-one li  {
   	min-width: 19%;
   }
   

3. Update your settings.

Thanks,
Bill

[Ryan Hennesy]

Fantastic.

Okay, last one. 🙂

I’ve swapped out the Hero Section on the home page with a slider per this thread: https://support.organizedthemes.com/forums/topic/revolution-slider-in-place-of-hero/

The only thing is that the slider adjusts to the size of the end user’s screen. The rest of the page, however, doesn’t adjust with it. Is there a way to make all of the widgets adjust based on the height of the slider (which is based on the width of the user’s screen)?

Again, screen shots…

In the first screenshot, the menu in question is under the slider, where in the second screenshot there’s a large gap between the slider and the menu.

Thanks for your help! You’ve been fantastic.

[Bill Robbins]

The first thing I would check on is to see if there is a height setting for the slider. If there is set it to be 600px tall which should match the size of the hero section when it’s set to the normal size.

If that doesn’t do it, try adding this to your Custom CSS too:

#wds_container1_0,
#wds_container2_0,
.wds_slideshow_image_wrap_0,
.wds_slideshow_image_0,
.wds_slideshow_image_spun_0,
.wds_slider_0,
.wds_slide_bg_0,
.wds_slide_container_0,
.wds_slideshow_image_container_0 {
	height: 600px !important;
}

Let me know how that goes,
Bill

[Ryan Hennesy]

Perfect.

The slider settings had height and width settings, but if it was set to “full width” then the height automatically adjusted based on the screen width. Otherwise, I could have set the limits, but then I would have had margins of various sizes on the left and right of my slider, which I didn’t want.

Thanks so much for your help.

You’re themes (and support, now, too) are great. I’ll definitely send people your way any chance I get!

[Bill Robbins]

Thanks Ryan, I really appreciate that 🙂

Let me know if you need anything else.

[Author]

Posts