Top Navigation Menu
Support Area › Forums › Moonrise › Top Navigation Menu
- This topic has 8 replies, 2 voices, and was last updated 7 years, 10 months ago by Bill Robbins.
-
AuthorPosts
-
May 2, 2016 at 16:41 #36649James GurleyParticipant
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.
May 3, 2016 at 11:16 #36656Bill RobbinsModeratorHello 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,
BillMay 10, 2016 at 16:08 #36778James GurleyParticipantHi 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,
JenMay 11, 2016 at 09:04 #36779Bill RobbinsModeratorHi 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,
BillMay 11, 2016 at 13:34 #36782James GurleyParticipantHi,
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,
jenMay 11, 2016 at 13:36 #36783Bill RobbinsModeratorIf you want to send a link, I can take a look.
May 11, 2016 at 14:42 #36787James GurleyParticipanthttp://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:)
May 11, 2016 at 14:43 #36788James GurleyParticipantOops, try this link: http://www.hearthrestaurantandpub.com/menu/
May 11, 2016 at 14:58 #36791Bill RobbinsModeratorHey 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 -
AuthorPosts
- The topic ‘Top Navigation Menu’ is closed to new replies.