Primary Navigation Centering – Minimum Theme

Community Forums Forums Design Tips and Tricks Primary Navigation Centering – Minimum Theme

This topic is: resolved

This topic contains 2 replies, has 2 voices, and was last updated by  mattOVM 9 months, 1 week ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #50389

    mattOVM
    Participant
    Post count: 9

    I am putting together this website and want to move the Primary Navigation in the Minimum Theme from Right to Center. I have a pretty good head start but I’m struggling to get it perfectly centered across the board on all the different devices.

    I adjust this code:

    /* Header
    ———————————————————— */

    }

    #header .widget-area {
    float: none;
    margin: 0 auto;
    width: 72%;
    }

    I had the width at 60% which works for everything but the iPad in landscape view. Bumping the width up to 72% did the trick for the iPad but now the Navigation is leaning to the Right on my desktop browsers. I feel like there must be another code to give it an absolute value across the board?

    Any thoughts would be greatly appreciated.

    Thanks!
    Matt

    http://theclassicitycollective.com/secret-sauce
    #50402

    Doak Heggeness
    Participant
    Post count: 140

    Add text-align:center; to the following:

    .menu-primary,
    .menu-secondary,
    #header .menu {
    	clear: both;
    	color: #3e3e3e;
    	font-size: 13px;
    	margin: 0 auto;
    	overflow: hidden;
    	width: 100%;
            text-align:center;   
    }
    

    Changefloat: left; to float: none; & add display: inline-block;

    .menu-primary li,
    .menu-secondary li,
    #header .menu li {
    	display: inline-block;  
    	float: none;   
    	list-style-type: none;
    }

    Doak Heggeness, WordPress Development | Website

    #50407

    mattOVM
    Participant
    Post count: 9

    Thank you Doak, that’s incredibly helpful!

    For others looking on, after Doak’s changes I had to go back to the #header .widget-area and readjust the width to compensate. I found 62% seems to work in my case.

    #header .widget-area {
    float: none;
    margin: 0 auto;
    width: 62%

    Thank you!
    Matt

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

You must be logged in to reply to this topic.