[Resolved] Sticky nav with effect, menu moves to right

[Jamal]

Hi

I’m having some trouble with the sticky navigation which is moving to the right when i set sticky navigation effect. When i set no effect there is no problem. I’m on local server so i’m not able to show you the site unfortunately but please see screenshots below.

not sticky menu

sticky menu

Not a big deal though as i can work with no effect on sticky navigation.

[Tom]

That’s strange, do you have a live site you can test it on? I haven’t noticed anything like that.

[Jamal]

Check it here.

Would also appreciate if you could tell me why its behaving strange below 320×640 screens.

Thanks

[Tom]

Fixed elements need to have a set width as they’re technically not block elements.

In the fade/slide elements, the width is 100% by default. The issue you’re having is the 100% isn’t respecting the border you set.

With the no effect, I had to code it so if you were using a contained layout, the navigation was contained as well. It takes some extra coding, so I didn’t do the same thing to the fade/slide effect.

However, if your layout is contained and you’re using fade/slide, the menu should also be contained. I’ll be sure to work this into a future version.

For now, I do have a solution for you.

1. Scrap the border.
2. Give the HTML element a background color:

html {
    background: #2E812E;
}

3. Give the body a width and center it:

body {
    width: 98%;
    margin: 15px auto 0;
}

4. Set the sticky navigation to the same width:

body.sticky-menu-slide .navigation-clone,
body.sticky-menu-fade .navigation-clone {
    width: 98%;
}

Hope this helps 🙂

[Jamal]

Sorry Tom but that doesn’t seem to fix it unfortunately.

I have two other unrelated stuff, i will post them here but do let me know if it’s best i open another topic.

– The hamburger menu doesn’t display submenu items as sub-menu items when primary navigation height is set to above 60px. Adding the code below seems to fix it though.

@media (max-width: 768px) {
    .main-navigation .main-nav ul li a {
        line-height: 60px;
    }
}

– The h2 block on the page is behaving strangely below 320×640 screen size. Can you please point for me what’s happening?

[Tom]

I just adjusted the code in #4 above – had to make it a little more specific.

2. That code should be added by default – can you show me what you mean?

3. Ah, this is happening because it’s set to full height, so when the height is very small (on mobile for example), there’s not enough room in the page header area for all your content.

Try adjusting stuff for that screen size:

@media (max-width: 768px) {
    .inside-page-header .button.transparent-button {
        font-size: 17px;
    }
    .inside-page-header p {
        margin-bottom: 10px;
    }
    .inside-page-header h2 {
        font-size: 17px;
    }
}

[Jamal]

Thanks a lot for your help Tom, i had to take a break from all this as it was starting to get a little fuzzy.

2. Solved. I forgot to assign slideout menu and that was the problem.

3. Solved. Sorry for wasting your time but i came to realize i had too many divs which were unnecessary. The problem with learning new stuff is you want to apply them everywhere and in this case i was using unsemantic grid just to align buttons #facepalm

By the way, if you get the time and think it’s useful i would appreciate some guide on how to use the css classes already built into the theme. Most of the time i try to reinvent the wheel and drive myself crazy for nothing.

[Tom]

Glad I could help!

If you have any specific questions about the built in CSS I’m always happy to help! You seem to already have a good grasp on the HTML/CSS relationship and using Inspect Element, which is half the battle 🙂

[Jamal]

Thanks, i’m trying to learn as much as i can from this forum and beyond. About the inbuilt CSS classes, nothing in particular right now, it’s just that i think i read a forum post where you used page-header class or something like that inside hooks and i got a “aha moment”.

Edit: I’m unable to mark this resolved but please consider the issue resolved.

[Tom]

Using the inspect element tool in your browser is definitely the best way to go about learning the classes of the theme 🙂

[Author]

Posts