Display Custom Menu Horizontally

[BP]

When I place a "Custom Menu" widget into "Header Right" widget area, the menu displays vertically.
E.g.
Home
About
Contact

How can I get it to display horizontally? And how can I get it to align right.
E.g.
Contact About Home

FYI: I have the Prose theme. And I've tried adjusting the header title and widget area widths.
http://www.guruhabits.com/

---

Brad

[RobG]

Were 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/robgoss

[BP]

Rob,

I added the site url a few seconds after posting. Here it is again.

http://www.guruhabits.com/

---

Brad

[RobG]

I'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/robgoss

[BP]

Secondary 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

[RobG]

Can 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/robgoss

[BP]

I 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.

http://www.agegineering.com

Your help is appreciated.

---

Brad

[RobG]

Brad 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/robgoss

[BP]

Rob, It's there. I added a two item menu, Operations & Newsletter, to the right header section here: http://www.webscapeproductions.com/

---

Brad

[RobG]

Brad 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/robgoss

[BP]

Yes. As I stated at the top of this thread.

---

Brad

[Robert Neu]

Adding something like this to your style.css file should do what you're after:

#header .menu-item {
    background: none;
    border: none;
    float: left;
    margin: 0;
    padding-bottom: 0;
}

---

Co-Founder of Audit WP, a WordPress SEO audit service and Flagship, a new WordPress theme company launching soon!

[BP]

Thank 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

[Robert Neu]

Well, 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

---

Co-Founder of Audit WP, a WordPress SEO audit service and Flagship, a new WordPress theme company launching soon!

[BP]

Thank you, Fat Media. I'll work on it.

---

Brad

[meganl]

How did this work out?
I have Beautiful Pro theme which wont change from vertical to horizontal which the sample showed.

[meganl]

I 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

[Author]

Posts