Support » Theme: Customizr » Center menu items

  • Resolved The_Waste_Land

    (@the_waste_land)


    Hi!

    I’m working on my first WordPress site and I really like this theme (I plan to write a review asap :-)).

    I managed to center the logo and the menu bar (it looks like this) but now I would like to know if there is a way to center the menu items too as it would be more graphically consistent with the rest.

    I gave a look at this Snippet but I am very new to the whole building websites thing and couldn’t figure out whether I could use the info provided and how.

    Any help would be much appreciated.

    Thanks! 🙂

Viewing 6 replies - 1 through 6 (of 6 total)
  • Hi,

    1) the first thing to do is to create a customizr child theme that you will customize.

    2) In this child theme, copy the php code provided in the snippet in the functions.php file, and the css code in the style.css file.

    I hope this will help you find a way, and enjoy your customizations !

    HI nikeo,

    thanks again for the awesome theme and for your help.

    I’m already using a child theme, could you please point to me which bit of code do I need in order to achieve my goal?

    I already have the following in my style.css and I’m afraid I would mess around:

    /* navbar site desc remove but keep it for SEO */
    .navbar-wrapper .navbar .site-description { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); }
    
    /* navbar social remove */
    .navbar-wrapper .navbar .social-block { display: none; }
    
    /* navbar adjust padding */
    .navbar-inner { padding-top: 16px; }
    .navbar.resp .navbar-inner { padding-bottom: 4px; }
    
    /* Center navbar */
    .navbar-wrapper .navbar {
      float: right;
      width: 70%;
    }

    Hi, the best way is to try different peaces of code and select the best one for you. Everything you need is in the snippet!

    Ok, thanks.

    I’ll try and post the results.

    For future reference, this is the piece of code I used and it worked:

    /* Variable number of floating elements */
    .navbar .nav {
    float:      none;
    width:      100%;
    text-align: center;
    }
    .navbar .nav > li {
    float:      none;
    display:    inline-block;
    }

    I also adjusted the width of the navbar in

    .navbar-wrapper .navbar.notresp.row-fluid {
    float:      none;
    width:      90%;
    margin:     0 auto;
    }

    Thanks.

    Thanks for sharing this code!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Center menu items’ is closed to new replies.