WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Center aligned nav bar twenty twelve theme (9 posts)

  1. NathalieS
    Member
    Posted 1 year ago #

    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!

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    What CSS did you try?

  3. NathalieS
    Member
    Posted 1 year ago #

    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;
    }

  4. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

    @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%;
    	}
    }
  5. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

    All I changed was text-align: left to center

  6. NathalieS
    Member
    Posted 1 year ago #

    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]

  7. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

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

  8. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

  9. NathalieS
    Member
    Posted 1 year ago #

    Hi guys,

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

Topic Closed

This topic has been closed to new replies.

About this Topic