[Resolved] Mobile Menu Primary Navigation Format Issue

Home Forums Support Mobile Menu Primary Navigation Format Issue

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1475644
    Anthany

    Hi GeneratePress team, I have a question regarding the primary navigation menu on the mobile version of my site (www.scuffed.ca). I have my primary navigation exactly how I like it on the desktop version of my website by adding the CSS “menu-item-float-right” to my “account” and “seller registration” pages, with the seller registration being the farthest to the right on the navigation menu. However, on the mobile version of my site the seller registration floats above the account page in the menu, something that can only be changed by switching the places of the two pages on my desktop menu which I don’t want. On top of that I would like if both these options could be on the left side of the mobile menu bar along with every other menu option instead of on the right. Any help you can give regarding this topic would be greatly appreciated.

    Thanks, Anthany

    #1476046
    David
    Staff
    Customer Support

    Hi there,

    can you share a link to where i can see the issue?

    #1477236
    Anthany

    Hi David, yes of course, from this link https://www.scuffed.ca/ (my website homepage although the primary navigation will show on any page) when viewed on a mobile device you will see the primary navigation menu and when clicked it creates a dropdown for page and category options (Home, Hype, General, etc.). At the bottom of all these options are the “seller registration” and “account” options and as you will see they are right-aligned and the “account option is below the “seller registration” option and this is where my problem lies.

    Thanks, Anthany

    #1477482
    Elvin
    Staff
    Customer Support

    You have cached CSS saved by your siteground optimizer that causes this.

    I’ve checked through your CSS and found a use of float: right !important; on .menu-item-float-right w/o any media queries. This causes “seller-registration” and “account” to align right.

    You can try adding this CSS code. Make sure to purge your cache on Siteground optimizer.

    @media (max-width:768px){
    .main-navigation.toggled .sf-menu>li.menu-item-float-right {
        float: left !important;
        display: block;
    }
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1477494
    Anthany

    Thank you so much Elvin that did the trick and left-aligned them. Now my final question is, do you have any idea how I could have the “account” option to be above the “seller registration” option on the mobile menu whilst keeping the “seller registration” option to stay where it is on my desktop menu? (It is on the right side of the account option on my desktop menu and I would like it to stay there).

    Thanks so much, Anthany

    #1477508
    Elvin
    Staff
    Customer Support

    …do you have any idea how I could have the “account” option to be above the “seller registration” option on the mobile menu whilst keeping the “seller registration” option to stay where it is on my desktop menu?..

    You may want to consider using flexbox on Dashboard > Appearance > General and rework your CSS codes(remove your floats, adopt flexbox properties) to make use of order property. It’s better to do that in the long run.

    Or if that’s too tedious, you can just keep the unused floats on mobile and do this.

    @media (max-width:768px){
    .main-nav > ul.menu {
        display: flex !important;
        flex-direction: column;
    }
    li.menu-item:nth-child(6) {
        order: 7;
    }
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1477527
    Anthany

    Thank you very much Elvin, that put them in the correct order though now the mobile menu is always open and does not close, any idea why? I will absolutely look into flexbox and how to rework my CSS code thank you for the advice.

    Cheers, Anthany

    #1477529
    Elvin
    Staff
    Customer Support

    Oh yeah my bad. Try this instead?

    @media (max-width:768px){
    .main-navigation.toggled .sf-menu {
        display: flex;
        flex-direction: column;
    }
    li.menu-item:nth-child(6) {
        order: 7;
    }
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1477541
    Anthany

    Just had to change .sf-menu to ul.menu and it worked like a charm, thank you so much for all your help and advice Elvin.

    Cheers, Anthany

    #1477565
    Elvin
    Staff
    Customer Support

    Just had to change .sf-menu to ul.menu and it worked like a charm, thank you so much for all your help and advice Elvin.

    Good catch. No problem. 🙂

    A wise man once said:
    "Have you cleared your cache?"

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