Header Buttons

Edit the child theme’s header.php template or whichever subordinate part is appropriate. If the template is not in your child theme, copy it from the parent.

FYI, shortcodes only work in post content and CSS can only alter existing content. For the most part it cannot create content.

Got it, I did create a child and found some code from a sister site that I can use. I’m having trouble figuring out the CSS to configure placement on the header any one willing to help? Thanks!!

If you can provide a live link to the page with some details about what you want to achieve, someone can likely help you out. It’s almost impossible without a live link because we use the browser’s CSS inspector to work out a solution. It’s worth learning to use this tool yourself, then you can just do for yourself what we would do with your link ??

new.valleyforgeaudubon.org is the site I’m working on.
johnjames.audubon.org is the site that I am trying to replicate the buttons from. I am new to CSS but am figuring it out, I just need help from you nice people from time to time ?? Here is the code from the john j site
Where We Are
<li class=”action-nav-item action-nav-item”>
Donate
<li class=”action-nav-item action-nav-item”>
Get Involved

<ul class=”secondary-nav inline-list”>
<li class=””>
Volunteer
<li class=””>

and the css:
ul.action-nav.inline-list {
float: right;
padding-top: 18px;
}
.inline-list li {
display: inline-block;
vertical-align: middle;
}
.button.tomato {
background-color: #f15936;
border-color: #dd360f;
color: white !important;
border-radius: 3px;
}
.button.small {
padding: 5px 10px;
font-size: 17px;
font-size: 15px;
}

Thank you!!!

Could you please first take a stab at placing the HTML elements? It looks like the search icon and form appears after the menu, followed by Volunteer and Where we are. The Donate and Get Involved are after the social icons.

To get the menu to float left, around line 918 of style.css is the selector .main-navigation. Change the float rule for this from right to left.

Any styling that you can setup ahead of time, like colors, font size, padding, etc. would be helpful. I’m under the impression you needed help with placement. It’s sort of the final step. Everything else needs to be in place first.

When you paste in code, please use the ‘code’ button or place the code between `backticks`, otherwise the forum’s parser will corrupt things. Take a look at your last post to see what I mean.

If you’ve done your part well, there’s no need to post the code, it can be found from the actual page. It’s only PHP code that we cannot get from a live page.

Please help me help you ??

Thanks bcworkz.

I’ve added the HTML and I’m having problems with the placement of the Get Involved and Volunteer links. They seem to be all over. I used

.secondary-nav. inline-list {
	float:right;
  padding-top: 18px;
}

and it did nothing. Any help is greatly appreciated!

OK, thanks. I need a little more help from you first though. Please move the Get Involved from the social menu and place it with Volunteer in the secondary nav menu.

Then on the appropriate header template, move the secondary wp_nav_menu() call to occur after the primary wp_nav_menu() call. (I’m guessing wp_nav_menu() is used. If not, I mean move whatever is responsible for menu output)

The major elements of the .inner-wrap div should occur in the following order:
.site-branding, .action-nav, #site-navigation, .search-form, .secondary-nav

This should get things a little better controlled. Final CSS adjustments will be more successful this way.

I’m really struggling to get this into a secondary nav. Not sure what I am doing wrong. I’ve added it after the main nav. and it either keeps showing above or not at all.

Sorry for your troubles. Getting the HTML in the proper order is necessary for this to work properly. As long as the secondary nav HTML content occurs after the primary when you view the page source in your browser, it really doesn’t matter where it shows up in the regular view, or even if it shows up at all, as long as the HTML is there and in the right order. The rest can be managed with CSS. When rearranging content like this, it’s normal for the display to be messed up until the CSS can be corrected.

I’m sorry I wasn’t clearer about what I was asking of you. Thank you for your patience.

I’ll try to get it working. I’ve also added these items to the menu and am hoping to get them right justified. I will post back once I have gotten the HTML added. Thanks!