Navigation menu

Forgot the link to my site: http://www.step-by-step-paleo.com/

Hi Carmen,

1. You found a bug! :)

Go to "Appearance > Editor" and replace everything starting at .stickynav #site-navigation with:

.stickynav #site-navigation {
	border-top: 0 none;
	position: fixed;
	top: 0;
	width: 100%;
	max-width: 100%;
	z-index: 100;
	opacity: .8;
	-webkit-transition:all 0.2s ease-in-out;
	-moz-transition:all 0.2s ease-in-out;
	-o-transition:all 0.2s ease-in-out;
	transition:all 0.2s ease-in-out;
}
.stickynav  #site-navigation:hover {
	opacity: 1;
	-webkit-transition:all 0.2s ease-in-out;
	-moz-transition:all 0.2s ease-in-out;
	-o-transition:all 0.2s ease-in-out;
	transition:all 0.2s ease-in-out;
}

2. Yes, this is possible, but you'll want to make your header larger so it doesn't lose quality. You would use this CSS:

.inside-header.grid-container {
	max-width: 100%;
}

.site-logo {
	width: 100%;
}

/* Force 100% width of header image */
.site-logo img {
	width:100%;
}

You'll want to add that using a custom CSS plugin like this: https://wordpress.org/plugins/simple-custom-css/

You'll want to use the above plugin instead of the child theme in case you ever want to update the child theme.

If you have the Copyright addon, you can use HTML in that field to add links to the footer. Let me know if that's not good enough :)

Thanks! You're the best!
Just one thing about the navigation menu. It doesn't jump to the left anymore, but I would like to have it the same size as the header image. (so it stays in the middel of the page, if you know what mean).

Sounds simple, but unfortunately CSS requires the width to be 100% if the position is fixed (which is what's keeping it sticking to the top).

We can accomplish this, but it's a little hacky.

@media screen and (min-width: 768px) {

      .stickynav #site-navigation {
            left: 50%;
            width: 100%;
            max-width: 1050px; /* width of your container */
            margin-left: -525px; /* half of your container width */
      }

}

We make it so it only applies to desktop - as mobile nav will be 100% anyways.

Then set it to 50% from the left, minus half of the container.

That should do it.

Let me know :)

Okay, I understand.

It worked on the left side but not on the right side.
I've put the code you gave me in the Custom CSS from Jetpack is that the right place?
Or do I have to put it in Appearance > Editor?

My mistake, I put min-width: 1050px instead of max-width: 1050px.

If you make that change, it should work :)

Great!! That's perfect. Thanks again!

Hi Tom,

I don't know if you can help me, but I did something stupid.
The navigation menu changed back into full size. So I tried to paste the code you gave me, in the Editor. But I wasn't sure it was the right place. So I removed it. And then the site was broken. I can't do anything anymore. Can't even get in WP dashboard.
Do you have any idea how I can fix this?

This is the error that I get, when I visit my site:
Parse error: syntax error, unexpected '/' in /data/home/step01/domains/step-by-step-paleo.com/public_html/wp-content/themes/mantle/functions.php on line 283

http://www.step-by-step-paleo.com/

Looks like you added the CSS to the functions.php file.

PHP is super strict and this will happen when proper syntax isn't followed.

You'll need to go into your website via FTP, or your hosting control panel file manager, and remove the code you added from the functions.php file.

Hope this helps!

Thanks again for your help! That worked!

I have just one last question, and then I hope I don't have to bother you for a while.
Is it possible to add a search function (magnifier icon) in the navigation menu?

It would take some custom PHP, but I'm currently working on an option to do that if you're willing to wait a little? :)

Okay, I'll wait! :)

Hi Tom

I have installed GP with premium pack recently. I am really excited about the theme, but also from your professional support.

Getting back to Carmen's question, I would like to know how and where a sticky navigation menue (stay on top of screen, when page is scrolled down) has to be implemented in the theme and got another question: I use an image as haeder background and made it fixed. Now i want to place some text on it (like: welcome to this side bla bla), but do not want it hard coded in the image itself.

At the very moment my website is only on localhost available, so i can't show anything right now.
What's the way to do it ?

Looking forward to your reply. Thanks in advance, Paul

Hi Paul,

You can take a look at our child themes to see how to add a sticky header - it involves enqueuing a javascript file, and then including some CSS to make it stick.

Take a look:

https://wordpress.org/themes/exhibit
https://wordpress.org/themes/mantle

You'll want to copy the enqeueue part of the functions.php, and also make sure to download the file it's enqueuing.

Then copy the CSS dealing with "stickynav" and you're good to go.

As for the image - if you don't want to hardcode the text into the image, then you'll need to set the image as a background image so the text lays over top of it.

Let me know if you have any questions :)