WordPress.org

Support

Support » Themes and Templates » [Resolved] Evenly Space Links on Primary Navigation

[Resolved] Evenly Space Links on Primary Navigation

  • I love the raindrops theme but really want to evenly space the links across the main navigation across the pane. How can I evenly space out the navigation items so that they auto adjust to the size of the screen?

    Ideally the “Blog” link would stop right where the widgets begin to display.

    My site is here: http://www.proeventdj.com/

Viewing 6 replies - 1 through 6 (of 6 total)
  • Theme Author nobita

    @nobita

    Hi mrothlein

    autofitting example.

    div.menu > ul, /* raindrops default */
    #access ul.menu{ /* your site */
    	display: -webkit-box;
    	display: -moz-box;
    	height:35px!important;
    
    }
    div.menu > ul > .menu-item, /* raindrops default */
    div.menu > ul > .page_item, /* raindrops default */
    ul.menu li.menu-item{		/* your site */
    /* rules for debug
    	border:1px solid red;
    	margin:-1px;*/
    	text-align:center;
    	-webkit-box-flex: 1;
    	-moz-box-flex: 1;
    }

    Since your site has many menus, it may become impossible to be able to use this idea, when there are few menus, but to read a text

    Thanks, that works really well, although the links expand across the entire menu bar. I would like for them to stop at the point in which the widget bar begins. Can that be done?

    Theme Author nobita

    @nobita

    I would like for them to stop at the point

    I think, create a one more wp_nav_menu() is simple.

    Sorry, I am not sure I understand your reply. I would need to create a new menu to space out the links?

    Also, and this is a different question. The active link on the menu is bold. Is it possible to also change the color of the active link to make it stand out more?

    Theme Author nobita

    @nobita

    /* The value of max-width, please adjust the width of the browser text wrapping occurs*/
    
    @media screen and (min-width: 641px) and (max-width: 800px) {
    
    	#access a{
    		line-height:1.2;
    	}
    }
    
    div.menu > ul, /* raindrops default */
    #access ul.menu{ /* your site */
    	display: -webkit-box;
    	display: -moz-box;
    
    }
    div.menu > ul > .menu-item, /* raindrops default */
    div.menu > ul > .page_item, /* raindrops default */
    ul.menu li.menu-item{		/* your site */
    /*	border:1px solid red;
    	margin:-1px;*/
    	text-align:center;
    	-webkit-box-flex: 1;
    	-moz-box-flex: 1;
    	align-items:stretch;
    }
    
    /* current menu item link color */
    #access .menu-header ul li.current-menu-item > a{
    	color:#f00;
    	font-weight:normal;
    }

    Thank you.

    Thanks for the quick response and for the code!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘[Resolved] Evenly Space Links on Primary Navigation’ is closed to new replies.