Black Friday Sale! Get up to $40 off GP Premium!Learn more

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

Home Forums Support Sticky nav with effect, menu moves to right

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #208780
    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.

    Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

    #208840
    Tom
    Lead Developer
    Lead Developer

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

    #208932
    Jamal

    Check it here.

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

    Thanks

    Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

    #209044
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #209125
    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?

    Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

    #209281
    Tom
    Lead Developer
    Lead Developer

    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;
        }
    }
    #210096
    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.

    Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

    #210122
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #210268
    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.

    Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

    #210341
    Tom
    Lead Developer
    Lead Developer

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

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