[Resolved] Navigation menu

Home Forums Support Navigation menu

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #13629
    dyami

    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!

    #13630
    dyami

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

    #13653
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #13696
    dyami

    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).

    #13703
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #13704
    dyami

    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?

    #13706
    Tom
    Lead Developer
    Lead Developer

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

    If you make that change, it should work 🙂

    #13707
    dyami

    Great!! That’s perfect. Thanks again!

    #14038
    dyami

    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/

    #14039
    Tom
    Lead Developer
    Lead Developer

    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!

    #14042
    dyami

    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?

    #14550
    Tom
    Lead Developer
    Lead Developer

    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? 🙂

    #14610
    dyami

    Okay, I’ll wait! 🙂

    #45199
    Paul

    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

    #45359
    Tom
    Lead Developer
    Lead Developer

    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 🙂

Viewing 15 posts - 1 through 15 (of 20 total)
  • You must be logged in to reply to this topic.