WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] Center aligned nav bar twenty twelve theme

[Resolved] Center aligned nav bar twenty twelve theme

  • NathalieS
    Member

    @nathalies

    Hi,

    I’m trying to center align the nav bar in my twenty twelve child theme. I tried several methods displayed on this forum but nothing seems to be working so far. link to my site: http://www.joy-visagie.nl

    Hopefully someone can help me out!

Viewing 8 replies - 1 through 8 (of 8 total)
  • Andrew Nevins
    Forum moderator

    @anevins

    What CSS did you try?

    NathalieS
    Member

    @nathalies

    This is what i’ve got now:

    /* Navigation Menu */
    .main-navigation {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    text-align: center;
    }
    .main-navigation li {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    font-size: 12px;
    font-size: 0.857142857rem;
    line-height: 1.42857143;
    }
    .main-navigation a {
    color: #5e5e5e;
    }
    .main-navigation a:hover {
    color: #21759b;
    }
    .main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
    display: table;
    margin: 0 auto;
    }
    .main-navigation ul.nav-menu.toggled-on,
    .menu-toggle {
    display: table;
    margin: 0 auto;
    margin-right: 0 auto;

    }
    .main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
    border: none;
    }

    Pioneer Web Design
    Participant

    @swansonphotos

    @media screen and (min-width: 600px) {
    	.main-navigation ul.nav-menu,
    	.main-navigation div.nav-menu > ul {
    		border-bottom: 1px solid #ededed;
    		border-top: 1px solid #ededed;
    		display: inline-block !important;
    		text-align: center;
    		width: 100%;
    	}
    }
    Pioneer Web Design
    Participant

    @swansonphotos

    All I changed was text-align: left to center

    NathalieS
    Member

    @nathalies

    Thanks so much for the help, but it doesnt seem to be working.. This is what ive got now:

    [no need to post CSS – it’s all visible on your site]

    WPyogi
    Forum Moderator

    @wpyogi

    Your child theme is not set up correctly – it should not contain a copy of the parent theme style.css file.

    WPyogi
    Forum Moderator

    @wpyogi

    It should contain this:

    /*
    Theme Name:     Twenty Twelve Child
    Theme URI:      http://example.com/
    Description:    Child theme for the Twenty Twelve theme
    Author:         Your name here
    Author URI:     http://example.com/about/
    Template:       twentytwelve
    Version:        0.1.0
    */
    
    @import url("../twentytwelve/style.css");

    After that, add ONLY CHANGES you are making – a tool like Firebug will help you find the code that you need to add.

    NathalieS
    Member

    @nathalies

    Hi guys,

    Thanks alot for the help! totally forgot to edit the style.css for the child theme, its all working now!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘[Resolved] Center aligned nav bar twenty twelve theme’ is closed to new replies.