- This topic has 19 replies, 4 voices, and was last updated 9 years, 4 months ago by Tom.
-
AuthorPosts
-
August 16, 2014 at 2:45 pm #13629dyami
Hi Tom,
I have question about the navigation menu. The navigation menu is centered, but when I scroll down, it jumps to the left. Can you tell me why that happens?
And also I want to know if it’s possible to make te header image bigger. From left to right side.
Last question. Is it possible to put a link in the footer?
Thanks!
August 16, 2014 at 2:48 pm #13630dyamiForgot the link to my site: http://www.step-by-step-paleo.com/
August 16, 2014 at 3:02 pm #13653TomLead DeveloperLead DeveloperHi 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 π
August 16, 2014 at 3:18 pm #13696dyamiThanks! 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).August 16, 2014 at 3:30 pm #13703TomLead DeveloperLead DeveloperSounds 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 π
August 16, 2014 at 3:43 pm #13704dyamiOkay, 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?August 16, 2014 at 3:47 pm #13706TomLead DeveloperLead DeveloperMy mistake, I put min-width: 1050px instead of max-width: 1050px.
If you make that change, it should work π
August 16, 2014 at 3:53 pm #13707dyamiGreat!! That’s perfect. Thanks again!
August 17, 2014 at 1:31 pm #14038dyamiHi 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 283August 17, 2014 at 1:45 pm #14039TomLead DeveloperLead DeveloperLooks 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!
August 17, 2014 at 2:13 pm #14042dyamiThanks 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?August 18, 2014 at 8:33 am #14550TomLead DeveloperLead DeveloperIt would take some custom PHP, but I’m currently working on an option to do that if you’re willing to wait a little? π
August 18, 2014 at 10:14 am #14610dyamiOkay, I’ll wait! π
November 9, 2014 at 10:55 pm #45199PaulHi 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
November 10, 2014 at 10:17 am #45359TomLead DeveloperLead DeveloperHi 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/mantleYou’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 π
-
AuthorPosts
- You must be logged in to reply to this topic.