Community Forums › Forums › Archived Forums › Design Tips and Tricks › Display Custom Menu Horizontally
Tagged: custom menu
- This topic has 16 replies, 4 voices, and was last updated 10 years, 8 months ago by
meganl.
-
AuthorPosts
-
November 17, 2013 at 12:21 pm #73581
BP
MemberWhen I place a "Custom Menu" widget into "Header Right" widget area, the menu displays vertically.
E.g.
Home
About
ContactHow can I get it to display horizontally? And how can I get it to align right.
E.g.
Contact About HomeFYI: I have the Prose theme. And I've tried adjusting the header title and widget area widths.
http://www.guruhabits.com/
Brad
November 17, 2013 at 12:44 pm #73601RobG
MemberWere do you have the menu placed currently?
To speed up the process please post the link to the website in question.
We recommend using Firebug to view source codes http://getfirebug.com/
RobGoss WordPress Developer
We build WordPress websites for your business or personal goals
http://www.robgoss.com / Follow me Twitter / https://twitter.com/robgossNovember 17, 2013 at 1:01 pm #73637BP
MemberRob,
I added the site url a few seconds after posting. Here it is again.
Brad
November 17, 2013 at 1:04 pm #73641RobG
MemberI'm asking were do you have the menu at the moment?
To speed up the process please post the link to the website in question.
We recommend using Firebug to view source codes http://getfirebug.com/
RobGoss WordPress Developer
We build WordPress websites for your business or personal goals
http://www.robgoss.com / Follow me Twitter / https://twitter.com/robgossNovember 17, 2013 at 1:11 pm #73651BP
MemberSecondary Navigation - below the header.
I want to eliminate that one and move it to the header right widget area where the 468x60 banner ad is now.
When I tested, it displayed vertically.
Brad
November 17, 2013 at 1:33 pm #73681RobG
MemberCan you place your menu in the right header section so I can take a look to see what If I can help you.
To speed up the process please post the link to the website in question.
We recommend using Firebug to view source codes http://getfirebug.com/
RobGoss WordPress Developer
We build WordPress websites for your business or personal goals
http://www.robgoss.com / Follow me Twitter / https://twitter.com/robgossNovember 17, 2013 at 1:50 pm #73718BP
MemberI added to this site. http://www.webscapeproductions.com I only added two items to keep the site looking normal.
Here's what I want it to look like. This is my only site so far using the Epik theme. All others, including the above, use Prose.
Your help is appreciated.
Brad
November 17, 2013 at 1:55 pm #73732RobG
MemberBrad in order to see what's going on I will need to see the menu you want in the right header section in action, this way I can figure out how to correct the width to make it all work.
To speed up the process please post the link to the website in question.
We recommend using Firebug to view source codes http://getfirebug.com/
RobGoss WordPress Developer
We build WordPress websites for your business or personal goals
http://www.robgoss.com / Follow me Twitter / https://twitter.com/robgossNovember 17, 2013 at 2:31 pm #73794BP
MemberRob, It's there. I added a two item menu, Operations & Newsletter, to the right header section here: http://www.webscapeproductions.com/
Brad
November 17, 2013 at 2:40 pm #73799RobG
MemberBrad are you also using the Custom menu in the right header widget section?
To speed up the process please post the link to the website in question.
We recommend using Firebug to view source codes http://getfirebug.com/
RobGoss WordPress Developer
We build WordPress websites for your business or personal goals
http://www.robgoss.com / Follow me Twitter / https://twitter.com/robgossNovember 17, 2013 at 2:45 pm #73802BP
MemberYes. As I stated at the top of this thread.
Brad
November 17, 2013 at 2:50 pm #73807Robert Neu
MemberNovember 17, 2013 at 3:18 pm #73818BP
MemberThank you, Fat Media!
Adding your code got it much closer. How do I position it in the middle vertically and get the sub menus to behave like those in the secondary nav menu. I want it to look and behave like this site:
http://www.agegineering.com/See the new menu I added for testing here: http://www.webscapeproductions.com/
Brad
November 17, 2013 at 4:11 pm #73829Robert Neu
MemberWell, the alignment can be fixed by adding:
#header .genesis-nav-menu { float: right; }
The dropdowns are a little more involved. Basically, you'll want to look at the styles for the primary navigation. You should be able to find them around line 463 in style.css. Once you find them, you're going to need to copy them and modify them a bit.
They should all have something like #subnav li ul in the code. Instead of the items saying #subnav li ul, they would need to say #header li ul.
This should get you started, but you might have to modify the code somewhat to get the look you're after:
https://gist.github.com/anonymous/7518893
November 17, 2013 at 4:16 pm #73830BP
MemberThank you, Fat Media. I'll work on it.
Brad
June 11, 2014 at 10:40 am #109362meganl
MemberHow did this work out?
I have Beautiful Pro theme which wont change from vertical to horizontal which the sample showed.June 11, 2014 at 11:02 am #109366meganl
MemberI am limited on time to figure out WHY it will not become horizontal navigation for my menu of words, currently I have taken off header image and just made a background image instead.
http://www.christinalicona.com/
Once I get the navigation of the menu of pages HORIZONTALLY in upper right, then I will put the logo back up in left corner and then
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.