Twenty Twelve Child Theme Edit Navigation

  • fjclem123

    (@fjclem123)


    11 years, 7 months ago

    Hello,
    I have made a child theme based on Twenty Twelve, http://dev.dupontcircleanc.net.

    I’m trying to add a social media menu, based on http://justintadlock.com/archives/2013/08/14/social-nav-menus-part-2, to the main navigation area.

    So in the header, and in the “nav” container I have the main navigation using the <?php wp_nav_menu( array( ‘theme_location’ => ‘primary’, ‘menu_class’ => ‘nav-menu’ ) ); ?> and I have my social media menu using <?php my_childtheme_social_menu(); ?>.

    The extra menu breaks my layout.

    I would like the main nav to float left and the social media menu to float right — in the same container. I’ve changed the css for the main-menu-navigation and it still breaks when I add another menu.

    Is there a way to have 2 menus in the main nav container?

Viewing 4 replies - 1 through 4 (of 4 total)
  • stephencottontail

    (@stephencottontail)

    11 years, 7 months ago

    Before you do this, I advise that you back up your dev site in case something goes wrong. I’d also advise that you temporarily remove all of the CSS you’ve added that affects your menus so you can start fresh, so to speak. You can add it again later after you’ve got the basic skeleton down.

    The basic skeleton code goes like this:

    @media screen and (min-width: 600px) {
  #site-navigation {
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    padding: 5px;
  }

  #site-navigation:after {
    content: '';
    display: table;
    clear: both;
  }

  .menu-main-navigation-container {
    display: inline;
    float: left;
    width: 65%;
  }

  .social-menu {
    display: inline;
    float: right;
    width: 35%;
  }
}

    The first two sets of rules give the entire navigation container a gray border, gives it some padding, and clears the floats. The next two sets of rules are for the menus themselves. Both are set to display on the same line, with the appropriate widths and floats set so they appear correct.

    After you get the basic skeleton complete, you can then start experimenting with the CSS that you temporarily removed. In particular, you may need to experiment with the padding, vertical alignment, and line height so that the menu items look right to you.

    Thread Starter fjclem123

    (@fjclem123)

    11 years, 7 months ago

    Thanks @stephencottontail

    That worked!!

    I’m still a little confused. Is the reason my css didn’t work because I had both navs in blocks with positioning – taking precedence over the floats?

    Thanks again,

    stephencottontail

    (@stephencottontail)

    11 years, 7 months ago

    To be honest, I don’t remember exactly what the issue was. But yeah, that could have been it. It might also have been an issue with CSS specificity.

    Thread Starter fjclem123

    (@fjclem123)

    11 years, 7 months ago

    Thanks.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Twenty Twelve Child Theme Edit Navigation’ is closed to new replies.