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

[Support request] Several menu fixes

Home Forums Support Several menu fixes

Viewing 15 posts - 1 through 15 (of 31 total)
  • Author
    Posts
  • #426818
    Moses

    Hey guys,
    for some reason my menu is bugged on mobile

    -What I’m trying to achieve:
    –desktop
    1. logo inside navigation float right
    2. main navigation centered
    3. logo is vertically aligned to the menu (let’s say 100px height, like I set the logo)
    4. slide-out menu icon replaced with text, and float the left
    5. slide-out menu items are right to left
    6. –slide-out icon/text should always appear after (left to) everything, including cart icon. even if it’s not floated to the left
    7. everything the same on sticky menu

    –mobile

    1. on mobile logo should still float to right, and hamburger menu to the left
    2. there should be hamburger / text which would open as a slide out and will include a special menu (I’d create a combined menu only for mobile)

    This is the CSS I’ve added so far, Thank you!

    /*---navigation logo fixed right---*/
    .navigation-logo {
        position:absolute;
        right: 50px;
    }
    /*---------------------------*/
    
    /*---merge header and navigation---*/
    .site-header {
        display: none;
    }
    /*-----------------------------*/
    
    /*-----SVG logo size-----*/
    
    .site-logo img {
        width: 100px;
        height: 100px;
        z-index: 5;
    }
    
    .main-navigation .site-logo.navigation-logo img {
        height: auto;
    }
    /*-----------------------------*/
    
    /* ------menu animation------- */
    .main-navigation li {
    position: relative;
      color: #4ca5ce;
      text-decoration: none;
      margin-top: 20px;
    }
    
    .main-navigation li:hover {
    color: #000;
    }
    
    .main-navigation li:before {
      content: "";
      position: absolute;
      width: 100%;
      height: 2px;
      bottom: 0;
      left: 0;
      background-color: #4ca5ce;
      visibility: hidden;
      -webkit-transform: scaleX(0);
      transform: scaleX(0);
      -webkit-transition: all 0.3s ease-in-out 0s;
      transition: all 0.3s ease-in-out 0s;
    }
    
    .main-navigation li:hover:before {
      visibility: visible;
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
    }
    /*----------------------*/
    GeneratePress 1.4
    GP Premium 1.5.3
    #427034
    Leo
    Staff
    Customer Support

    Hi there,

    Couple quick pointers before we proceed.

    1. Have you tried using the mobile header feature? https://docs.generatepress.com/article/mobile-header/
    If I understand you correctly, it should get you closer.

    2. I would recommend wrapping the menu animation CSS so it’s desktop only:
    https://docs.generatepress.com/article/adding-menu-hover-animation/

    #427995
    Moses

    Thanks a lot Leo

    didn’t know about that css animation article, really helpful and, I immediately implemented.

    Still, I need solutions for:
    1. replacing slid-out menu icon with text if possible
    2. floating the slide-out menu icon/text to the left
    3. making the cart icon as part of the menu – means it should be the last item. (I guess if the slide-out menu would be on the left that would get fixed)

    but most importantly:
    currently on mobile there’s one hamburger icon which just opens my slide-out menu. How can I set a unique menu (which would be both menu combined, and probably some shortcodes) to show only on the mobile hamburger?

    #428085
    Leo
    Staff
    Customer Support

    1. It already has text + toggle, so you just want the toggle to be removed?

    2. & 3. Looks like it’s already that way? https://s33.postimg.org/oreghz273/2017-11-19_0637.png

    So you want the slideout navigation to be different on desktop and mobile?

    If so you would have to add all the menu items in, then use this method:
    https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

    #429653
    Moses

    1. on desktop it has only icon, (icon and text is also ok)

    2. & 3. I guess I didn’t get my point across, I want the cart to be the last consecutive navigation item. and after that, to have the slide out menu (with a ‘more’ text for example) float to the left.
    so there would be:
    right – logo
    center – navigation (including cart as last item)
    left – slide-out hamburger

    4. That’s handy! so If the slide-out menu results I’m after are:
    ‘X’ menu items on desktop and tablet,
    ‘X’ + ‘Y’menu items on mobile,

    I should create a new menu, specifically for my slide-out panel, which will include ‘X’ and ‘Y’ items,
    and add a little ‘hide-on-desktop’ and ‘hide-on-tablet’ css code around the ‘X’ items?

    Could you help me with the syntax of it? I have no clue how to combine the tablet and desktop rules, and how to address only the specific ‘X’ items

    #429846
    Leo
    Staff
    Customer Support

    1. This might help: https://generatepress.com/forums/topic/slideout-menu/#post-162826

    2 & 3. Sorry but I’m still not sure what you are after, any chance you can mock it up to show me?

    4. Which part are you stuck on? Basically, if you want a menu item to only show on mobile, then you would add hide-on-tablet and hide-on-desktop

    #429899
    Moses

    1. I did succeed to add a text next to the icon (although the favicon class wasn’t needed as it made the icon twice)
    but I couldn’t hide the old slideout menu icon with the code tom provided, nor to make the new item display:block.

    2. You can look here: https://www.marieforleo.com this has a similar setting (only need to flip it because of RTL),

    4. I don’t know where should is write this code, i guess it’s not CSS, is it HTML? I paste CSS to simpleCSS but I don’t know where should I add HTML,
    also I don’t know how to write it so I target only specific menu items

    #429905
    Moses

    4. wait a minute… I think I get this. should I just add hide-on-tablet hide-on-desktop, to the custom class field of the item?

    #429910
    Leo
    Staff
    Customer Support

    1. To hide the old slideout toggle, use this CSS:

    .slideout-toggle:not(.custom) {
        display: none;
    }

    2. Ok so just to double check, all that’s missing right now is the slideout toggle needs to be switch spot with the cart icon?

    4. Have you checked the first example under “Some example usages:” in the link I provided?

    #429911
    Moses

    4. Ok, I can add one class in that field, but when I want to add to a menu item: hide-on-mobile hide-on-tablet I don’t know how to do that

    #429913
    Leo
    Staff
    Customer Support

    You would add in with a space in between exactly like how you have it above.

    #429915
    Moses

    2. almost, The slideout icon should also float left (while the rest of the items are horizontally centered

    4. yes, I don’t understand where should I put a code like that:

    <div class="hide-on-mobile hide-on-tablet">
        Content here will only display in Desktop
    </div>
    #429919
    Moses

    I did, this way the only first class work
    I wrote hide-on-desktop hide-on-tablet and it’s only hidden on desktop

    #429920
    Moses
    .slideout-toggle:not(.custom) {
        display: none;
    }
    

    didn’t work as well 🙁

    #429938
    Leo
    Staff
    Customer Support

    Try this CSS instead:

    li.slideout-toggle:not(.custom) {
        display: none !important;
    }

    Just checked the slide-out menu on tablet (landscape) and the menu items are indeed hidden.

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