Support » Fixing WordPress » Menu location in header

  • I apologize in advance if the simplicity of this question frustrates some, but i have looked all over what i could think to search for in the forums and in google.

    I am currently modifying a theme that has the menu items (home, about, admin, etc) located in the upper right corner of the header. I’d like to move them to the lower left corner of the header. I know how to move it to the left, but have yet to find something to bring it to the bottom of the header.

    I am a CSS novice, so any help would be appreciated.

    Thanks.

Viewing 8 replies - 1 through 8 (of 8 total)
  • If you have a look in the code for this page there’s a CSS rule written like this:

    #header ul {
    float:right;
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin-right:14px;
    min-width:500px;
    }

    That’s the rule float: right that pushes the image over to the right and changing that will stop it happening. However, the <a> element also has a float on it so in this case, the <ul> element will move up to the side of it rather than under it and to the left.

    You need to find the CSS rule I imagine, that applies to the header elements and work out what changes what.

    Have you ever heard of a FireFox plug-in called Firebug? It’s terriffic. It enables you to identify what CSS applies to what elements and you can even edit them and watch the live changes. Then, when you’re content that you know what to change, you can edit your pages and upload them.

    Be careful though, there are a few things about float that can cause problems and one or two principles that you need to grasp before you embark on too many changes.

    Read up a little on float, positioning and the Box Model – there’s loads of stuff out there.

    Martin

    yeah, i’m using firebug to learn all of this, well, using it to see what means what at least, then counting on w3 and a few other sites for definitions. thank you for your advice, i’m about to try to find that bit of code

    okay, i can get the menu items (basically just txt) to be on the left side of the header area, but i’m still not seeing a way to align it to the bottom (yes, i’ve tried text-align: bottom and it doesn’t work)

    for those of you looking to help:

    http://www.remnantfireworship.com/wordpress

    thanks

    1 week later bump…

    Update this.

    ul.menu {
    	margin: 0 10px 0 0;
    	padding: 0;
    	text-align: left;
    }

    to.

    ul.menu {
    	margin: 155px 0 0 0;
    	padding: 0;
    	text-align: left;
    	float:left;
    }

    awesome! thank you so much!

    You’re welcome.. 🙂

    Feel free to mark resolved to the right of the post –>

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Menu location in header’ is closed to new replies.