Display Custom Menu Horizontally

Community Forums Forums Design Tips and Tricks Display Custom Menu Horizontally

This topic is: resolved

Tagged: 

This topic contains 16 replies, has 4 voices, and was last updated by  meganl 1 month, 2 weeks ago.

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #73581

    BP
    Participant
    Post count: 64

    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

    • This topic was modified 8 months, 2 weeks ago by  BP.
    • This topic was modified 8 months, 2 weeks ago by  BP.
    #73601

    RobG
    Participant
    Post count: 1036

    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

    #73637

    BP
    Participant
    Post count: 64

    Rob,

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

    http://www.guruhabits.com/


    Brad

    #73641

    RobG
    Participant
    Post count: 1036

    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

    #73651

    BP
    Participant
    Post count: 64

    Secondary Navigation – below the header.

    I want to eliminate that one and move it to the header right widget area where the 468×60 banner ad is now.

    When I tested, it displayed vertically.


    Brad

    #73681

    RobG
    Participant
    Post count: 1036

    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

    • This reply was modified 8 months, 2 weeks ago by  RobG.
    • This reply was modified 8 months, 2 weeks ago by  RobG.
    • This reply was modified 8 months, 2 weeks ago by  RobG.
    • This reply was modified 8 months, 2 weeks ago by  RobG.
    #73718

    BP
    Participant
    Post count: 64

    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

    • This reply was modified 8 months, 2 weeks ago by  BP.
    • This reply was modified 8 months, 2 weeks ago by  BP.
    • This reply was modified 8 months, 2 weeks ago by  BP.
    • This reply was modified 8 months, 2 weeks ago by  BP.
    #73732

    RobG
    Participant
    Post count: 1036

    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

    #73794

    BP
    Participant
    Post count: 64

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


    Brad

    #73799

    RobG
    Participant
    Post count: 1036

    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

    #73802

    BP
    Participant
    Post count: 64

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


    Brad

    #73807

    Robert Neu
    Participant
    Post count: 90

    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!

    #73818

    BP
    Participant
    Post count: 64

    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

    • This reply was modified 8 months, 2 weeks ago by  BP.
    • This reply was modified 8 months, 2 weeks ago by  BP.
    • This reply was modified 8 months, 2 weeks ago by  BP.
    • This reply was modified 8 months, 2 weeks ago by  BP.
    #73829

    Robert Neu
    Participant
    Post count: 90

    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!

    #73830

    BP
    Participant
    Post count: 64

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


    Brad

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.