[Resolved] Re position nav menu in header

[Calvin]

I have a header with three items in it. A logo, a short (two item) nav menu and a header widget with social media links. I want the three to line up at the same level across the header space. Using the add on for Page Header, I can make the menu show up above or below the others or float to their right. Is there any way to make it appear in line with them?

Alternately, is there a way I can adjust the positioning of the widget up or down to line it up with the menu items?

Thanks – CLC

[Tom]

Hi Calvin,

Can you link me to your site? I may be able to give you some custom CSS which will achieve this.

[Calvin]

sure, thanks

http://kinshipgames.com/

[Tom]

Can you make it so the navigation is floating right?

That’ll help me come up with a solution 🙂

[Calvin]

done

[Tom]

And you want it so the social icons and menu switch places, and align better?

[Calvin]

that would be great. If you hover over the social icons, Facebook has three options. The top one gets cut off unless I put the menu below. I added some pixels to the top margin of the widget which helped. I guess I can add more.

Really appreciate the help!

[Tom]

This wasn’t as easy as I was hoping, but it’s possible.

1. Add this function to your child theme’s functions.php file: https://gist.github.com/generatepress/40edc2e0b2b588229856

2. Now, add this CSS:

.nav-float-right .main-navigation {
      float: none;
      display: inline-block;
}

Then you’ll have to play around with margins, but it should at least put them in the right order for you.

Let me know 🙂

[Calvin]

thanks – I’ll give it a try and let you know. Really appreciate this.

CLC

[Calvin]

Oops – maybe I put something in the wrong place. I added the code you suggested to functions.php and the stylesheet. When I went to try to change some customize settings, I got the following message:

Fatal error: Cannot override final method WP_Customize_Control::active() in /home/content/p3pnexwpnas05_data02/93/2257493/html/wp-content/themes/generatepress/inc/customizer.php on line 699

What should i do?

[Calvin]

Also, take a look at the site kinshipgames.com – the nav menu is now in line with the logo, but hard left

[Tom]

For the Fatal Error – that’s very weird, if you remove the function I gave you, does it still happen?

Just looked at your site and I’m seeing a even worse error – it looks like you may have copied the theme’s functions.php and pasted in your child theme’s functions.php?

If so, the functions.php is the only child theme file where you don’t have to do this – simply add your new functions, and it will continue to pull the core functions as well.

[Calvin]

OK, this is confusing. When I set up the child theme, there was no functions.php file. I assume the GeneratePress functions.php was controlling. I have been told to copy any file I plan to modify into the child theme then change it. That is what I did. I have now removed the functions.php file and things are working.

Where in the child theme do I put the coding? WordPress shows no functions.php file in the child theme. Sorry to be a little slow here!

[Tom]

It is confusing, that is the way to do child themes – copy the parent file and add it to your child theme directory.

However, the functions.php file is the one exception – this file can be completely blank in your child theme, and all of the core functions.php are still loaded.

So you want to create a new, blank functions.php file in your child theme, that starts with this:

<?php

Then, add the function I supplied.

Let me know if this makes sense (some of it is pretty hard to explain).

[Calvin]

OK – I’ve made the changes and the error message have gone away. This is causing the nav menu to float below the social icons widget on the right. I would like it to be in line with the logo and centered in the page. Any way to do that? – Sorry to keep worrying this!

[Author]

Posts