WordPress.org

Ready to get started?Download WordPress

Forums

raindrops
[resolved] Evenly Space Links on Primary Navigation (7 posts)

  1. mrothlein
    Member
    Posted 9 months ago #

    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/

  2. nobita
    Member
    Theme Author

    Posted 9 months ago #

    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

  3. mrothlein
    Member
    Posted 9 months ago #

    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?

  4. nobita
    Member
    Theme Author

    Posted 9 months ago #

    I would like for them to stop at the point

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

  5. mrothlein
    Member
    Posted 9 months ago #

    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?

  6. nobita
    Member
    Theme Author

    Posted 9 months ago #

    /* 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.

  7. mrothlein
    Member
    Posted 9 months ago #

    Thanks for the quick response and for the code!

Reply

You must log in to post.

About this Theme

About this Topic