custom secondary menu for twenty twelve

You need to add another menu to your child theme.

Basically, you need to
1) Set up the menu in your child theme’s functions.php file.
2) Add the menu to your theme (probably in the Theme Header (header.php) file)
3) Create a menu to put in there (the one with the links)
4) Apply the dashboard menu you created to the menu area you made.
5) Format as you like.

See: https://codex.www.ads-software.com/Navigation_Menus
It will walk you though this.

Thanks Lisa!

Okay, I did that part, now I’m trying to style it and I’m running in to some issues. I would like to align them with the main content without using padding?

Thanks again for your help!

Sorry if that was confusing. By ‘them’ I mean the navigation menu and the social media icons.

Also, is there any way I can keep this top menu from showing on mobile devices?

To line up the secondary menu (top blue) to the content body, you need to make it the same width as the content.

Try:

.menu-secondary-menu-container {
width: 960px;
margin-left: auto;
margin-right: auto;
}

That narrows the menu bar, but also narrows the blue bar running the width of the page.
To get the full width blue bar back, change the background of the menu container to blue, since it spans the full page width.

nav#secondary-navigation {
background-color: #92C9EF;
}

To make the secondary menu disappear when the pink menu box icon comes up, use a media query.

The pink menu box icon appears when the screen is 800px or smaller. Tell the blue bar menu to disappear at that size.

@media only screen and (max-width: 800px) and (min-width: 0px){
#secondary-navigation {
display: none;
}
}

For an over-view on media queries (making sites responsive) see:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Lisa

This worked perfectly! Exactly what I wanted! Thank you so much for your help!

@shudsonmc I am trying to do the same thing but can’t seem to get the menu horizontal. Would you mind sharing the css you used?
Thank isn advance