ThemeShaper Forums » Thematic

[closed]

Justify navigation menu

(7 posts)
  • Started 2 years ago by valklo
  • Latest reply from lastraw
  • This topic is not resolved
  1. valklo
    Member

    How can I really justify a horizontal navigation menu in wordpress theme? I am making thematic child theme.

    I need my navigation menu to be justify:
    # THE MENU ITEMS SHOULD BE JUSTIFIED JUST AS PLAIN TEXT WOULD BE #
    # ^ ^ #

    But I can't figure out how can I do that?

    Here is the html and css code:

    <div class="menu">
    	<ul class="sf-menu sf-js-enabled">
    		<li class="page_item page-item-1">
    			<a href="http://WP/page1/" title="Page1">
    		</li>
    		<li class="page_item page-item-2">
    			<a href="http://WP/page2/" title="Page2">
    		</li>
    		<li class="page_item page-item-3">
    			<a href="http://WP/page3/" title="Page3">
    		</li>
    		<li class="page_item page-item-4">
    			<a href="http://WP/page4/" title="Page4">
    		</li>
    	</ul>
    </div>
    .menu {
    	width: 940px;
    	margin: 0 auto;
    }
    
    .sf-menu {
    	margin:	0;
    	padding: 0;
    	list-style:	none;
    	border-right: 1px solid #ccc;
    	float: left;
    }
    
    .sf-menu ul {
    	position: absolute;
    }
    
    .sf-menu ul li {
    	width: 100%;
    }
    
    .sf-menu li {
    	float: left;
    	position: relative;
    }
    
    .sf-menu a {
    	display: block;
    	position: relative;
    }

    Please help me! Thanks!

    Posted 2 years ago #
  2. Scroll down this post from Helgatheviking and you'll find a decent answer(point 9). http://forums.themeshaper.com/topic/thematic-menus-demystified-1

    Posted 2 years ago #
  3. what do you mean by justify?

    Posted 2 years ago #
  4. valklo
    Member

    I mean that all menu items are equally distributed across the full width of the menu.

    But I need this to work with variable number of menu items, so that I don't need to change css every time I add new menu item;

    Posted 2 years ago #
  5. sounds like you need a jquery solution to dynamically calculate the width (or maybe the padding) on the link items. i've wondered how to do this myself, but only managed to set each link to be equal widths... ie if 5 links each link's width is 20%.

    Posted 2 years ago #
  6. valklo
    Member

    Can you give me the code, where you managed to set each link to be equal widths? It would save me some time. Thanks!

    Posted 2 years ago #
  7. maybe this could be done by assigning a css width via the new menu options?

    Posted 2 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.