Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #2958


    On the Habitat theme, I’d be interested in changing the menu buttons at the top (I’m using a mustom menu, from the menu’s link on the dashboard)

    I’d like to have an image, which may or may not change when the mouse hovers over it (undecided). Is this possible with habitat?

    Finally, otherwise, I love the theme! Very easy to customise to my own tastes mostly.


    Also, a side question. How would I right justify the text in the menu buttons?



    1.) You can modify the navigation menu to include an image relatively easily by editing the CSS for the menu items. The custom menu allows you to add a CSS class to the menu item link when you edit the item (if you don’t see it, click on “Help” at the top right of the pae and check the CSS box) and add the class here.

    For example, for the Home link you could use a class of “home”. You would then need to add the appropriate CSS to either replace the text with an image or set a background, background positioning and padding to suit the link depending on how many you have and how large the image is.

    2.) You can justify the text by adding this CSS:

    text-align: justify;

    to this code (style.css around line 207):

    .nav li a strong {

    display: block;

    font-size: 14px;

    font-weight: normal;





    Really sorry, but it seems change the style.css to right justify the menu items hasn’t worked…

    I’m talking about the top menu bar, which has things such as “home” and “portfolio” on it.

    I am using a custom menu, but it is supported by habitat (at least it appears to say it is) so that I can hide a couple of menu items.

    If what you’ve said applies to my situation still, could you post the sample code with that line in place? It may be thaqt I put it in the wrong place maybe… (Though I don’t think so…)


    Aha, I worked it out myself. I misunderstood you slighty. I worked out it needed to be:

    text-align: right;

    thanks very much!


    Sorry, one last question!

    Each of the top menu buttons has a small line on each side. How would I add a line to the right of the final button in the sequence? (so it appears justified to the edge of any images as well etc.




    I did wonder whether you meant to align the text to the right rather than justify…

    The css/style1.css (or style2.css or style3.css depending on your colour choice) needs modifying to change this:

    .nav li a {
    border-left: 1px solid #CCCCCC;

    to this:

    .nav li a {
    border-right: 1px solid #CCCCCC;

    The style.css file also need editing to remove this code:

    #top .nav li:first-child a {
    border: medium none;

    as at the moment simply changing the border-left to border-right will not apply for the 1st menu item and it would look wrong.



    Sorry about the justify thing, allof us at the company seem to be saying the same thing incorrectly in that case then…

    Umm, I don’t seem to have a style1 or any other css apart from style.css, which doesn’t have the code you mentioned?


    Sorry…once again I see where I went wrong! Went into the ftp server and changed it there. Thanks very much! Worked perfectly!


    Glad that James could help you :)

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘Menu button image rather than text’ is closed to new replies.