Top Navigation Menu

Support Area Forums Moonrise Top Navigation Menu

This topic contains 8 replies, has 2 voices, and was last updated by  Bill Robbins 1 year, 2 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
URL to the page in question: http://http://www.hearthrestaurantandpub.com
  • Author
    Posts
  • #36649

    James Gurley
    Participant

    Hello,

    My site currently utilizes the scrolling widgets, but I would like to add a top navigation bar as well. I have a few questions about this…

    1. I would like the navigation bar to appear above the logo. Right now, when I added the titles they auto appear on the lower right of the logo bar.

    2. I would like to create a tab that is a page called “menu.” However, right now it automatically makes each menu group a sub tab. is there any way to get all the food items on one page and keep the nice formatting created by the built in “Food” menus?

    3. Can I change the appearance of the navigation menu. I would like a different font and color if possible.

    #36656

    Bill Robbins
    Keymaster

    Hello James,

    You can do those things. Let’s see if we can find answers for you:

    1. The header there was designed to have a shorter logo with the navigation sitting on its right, roughly centered. You can move the navigation above the logo if you’d like to. Go to the Appearance section in your WordPress dashboard and click on Theme Options. Choose the Advanced tab at the top and scroll down to the Custom CSS box and add this there:

    
    #header-content {
    	position: relative;
    }
    
    #navigation {
    	position: absolute;
    	top: 10px;
    	width: 100%;
    	left: 0;
    	margin: 0;
    	text-align: center;
    }
    
    #navigation ul li {
    	display: inline-block !important;
    	float: none !important;
    }
    
    #navigation ul ul li {
    	text-align: left;
    }
    
    #logo {
    	padding-top: 40px;
    }
    
    @media only screen and (max-width: 767px) {
    
    	#logo {
    		padding-top: 80px;
    	}
    
    }
    

    Then save your changes. That should move the navigation above the logo and also center it.

    2. There is a page template that will show all of your menu groups and the items in them on one page. Create a page for your menu. Look in the right hand column for a box labeled attributes. In that box there will be a drop down menu for page templates. From that drop down, choose the one for the menu and then publish your page. That will list all of your menu groups in one spot, similar to how they are in the widgets on your front page. You can then add it to your navigation menu so visitors can find it.

    3. You can change fonts and colors for your navigation menu. Go to the Appearance section in your WordPress dashboard and click on Theme Options. On the “header” tab you’ll find options for the font, font size and colors for your navigation menu.

    See how that works for you and let me know if you have any questions,
    Bill

    #36778

    James Gurley
    Participant

    Hi Bill,

    Thanks so much for your feedback here! Just one more question…

    When I used the attribute option to include the full menu it works, but looks kind of messy on the page. Is there any way I can get to the layout so I can edit the spacing and such?

    Thanks,
    Jen

    #36779

    Bill Robbins
    Keymaster

    Hi Jen,

    There is another option for laying out the page menu. You can use “shortcodes” to display any menu group. It works like this:

    
    [menu group="burgers"]
    

    where burgers is the URL slug of the menu group. You can find the slug by going to the food section in your WordPress dashboard and clicking on menu groups. The slugs will be listed there next to each group’s name.

    That will give you a list of the items in that group. You can then design your page just about any way you want with images, heading and so on with the shortcode to add in the items in each group where you’d like.

    You can also combine that with one of the column plugins like Column Shortcodes (https://wordpress.org/plugins/column-shortcodes/) to line items up into columns. Use that along with the full width page template and you’ll have a lot of flexibility.

    Hope that helps out,
    Bill

    #36782

    James Gurley
    Participant

    Hi,

    I am not sure what I am doing wrong, but when I use the menu group slugs only some of the words appear and it is super messy. Any ideas?

    Thanks,
    jen

    #36783

    Bill Robbins
    Keymaster

    If you want to send a link, I can take a look.

    #36787

    James Gurley
    Participant

    http://www.hearthrestaurantandpub.com/wp-admin/post.php?post=1585&action=edit

    Do you need my log in info? I don’t want to make it visible publicly until it is fixed:)

    #36788

    James Gurley
    Participant
    #36791

    Bill Robbins
    Keymaster

    Hey Jen,

    It looks like some helper text was copied over with the menu group shortcode. That’s making the layout get all crazy there for you.

    When you’re editing your page, switch over to the text editor from the visual one. Then remove everything that looks like:

    
    <pre><code>
    
    </pre></code>
    

    and then save your page again.

    See how that works for you now,
    Bill

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

The topic ‘Top Navigation Menu’ is closed to new replies.