Premium support

Please log in to post in these forums. If you didn't create an account when you purchased, please contact us.

Free support

If you haven't purchased GP Premium, support for the free theme can be found on WordPress.org.

[Support request] Primary menu not displaying on mobile and slide out nav questions

Home Forums Support Primary menu not displaying on mobile and slide out nav questions

This topic contains 20 replies, has 3 voices, and was last updated by  Leo 12 hours, 38 minutes ago.

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #444165

    Hello,

    I have the slide out menu enabled on a site I am developing, next to the slide out menu button I wish to have two further icons, one being the woo commerce basket icon (this works perfectly on desktop and mobile) and another being a user icon (for the woo commerce my account page), I can get this working fine on desktop by adding the user icon and link to my account page in the primary menu, then formatting it with CSS. Howerver this stops working when you view the site in either tablet or mobile view, it simply dissapears.

    I would also like to display some social icons below my slide out menu, I have attempted this using a plugin to allow widget menu items and then setting the last menu item to be my social icon widget (I am using Simple Social Icons by Nathan Rice), however when inspecting the menu item it shows as display: none; in the CSS, even though nowhere have I told it to do this nor is it inheriting it from any other CSS I have written, I have attempted to overide this by adding the following CSS code to that menu item class, display: block; , however this did not work.

    Also is it possible to change the animation for the side out menu when it first opens and closes? I am aiming to get an effect where the menu is split in half and then joins from each side of the screen when opening.

    Thanks,
    Mike

    GeneratePress 2.0
    GP Premium 1.5.6
    #444320

    Tom
    Lead Developer

    You can add items to the mobile navigation/header like this:

    add_action( 'generate_inside_navigation', 'tu_add_mobile_menu_items' );
    add_action( 'generate_inside_mobile_header', 'tu_add_mobile_menu_items' );
    function tu_add_mobile_menu_items() {
    	?>
    	<div class="mobile-bar-items">
    		<a href="#">Text</a>
    	</div><!-- .mobile-bar-items -->
    	<?php
    }

    Can you re-add that menu item widget so I can see why it’s not working? That’s probably your best bet currently.

    Can you show me an example of a transition like that?

    Thanks!

    #444754

    Hello Tom,

    That code has kind of worked… It has got the icon displaying on mobile, however its overlapping the woo commerce shopping cart icon! I have tried using CSS to stop this.. however it did not work. Any suggestions?

    Menu widget is still added.. if you look at the code of the pullout menu then look at menu-item-141 thats the one which contains the widget and is showing as display: none; .

    With regards to the transition, the animation I have been asked to copy is from https://taylorswift.com/.

    Thanks,
    Mike

    #445004

    Tom
    Lead Developer

    Try adding this CSS:

    .mobile-bar-items {
        position: relative;
        float: right;
    }
    
    button.menu-toggle {
        width: auto;
    }

    A transition like that would likely require a significant amount of coding I’m afraid. It may become easier when we re-write the slideout navigation functionality.

    #445205

    Hello Tom,

    Fantastic! That worked! I also wrote some of my own code to reorganise the icons on desktop so the shopping cart appears last and user icon before it.

    Did you have any ideas on why the social icons would not display? Or is there any other way of doing it that does not involve adding them as a menu item.

    I did suspect the transition would require a lot of code! Bugger! Not to worry its a fairly minor superficial thing!

    Thanks,
    Mike

    #445210

    Spoke too soon! My CSS code to get the shopping cart displaying at the end now seems to not be working! It works fine in the customiser preview… however when I click of this it does not work! I have tried clearing my browser cache and using incognitio windows etc… still wont work… the code is as follows….

    nav.wc-menu-cart-activated:nth-child(2) > div:nth-child(1) > div:nth-child(4) > ul:nth-child(2){
        display: -webkit-box;
        display: -moz-box;
        display: box;
        
        -webkit-box-orient: horizontal;
        -moz-box-orient: horizontal;
        box-orient: horizontal;
      
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
         box-sizing: border-box;
    }
    
    #menu-item-177{
    		float: right;
    	  -webkit-box-ordinal-group: 2;
        -moz-box-ordinal-group: 2;
        box-ordinal-group: 2;
    }
    
    nav.wc-menu-cart-activated:nth-child(2) > div:nth-child(1) > div:nth-child(4) > ul:nth-child(2) > li:nth-child(3){
    	  -webkit-box-ordinal-group: 3;
        -moz-box-ordinal-group: 3;
        box-ordinal-group: 3;
    }
    #445391

    Tom
    Lead Developer

    Try removing that CSS and add this:

    #menu-icons li {
        float: none;
        display: inline-block;
    }
    
    #menu-icons .slideout-toggle {
        float: left;
    }
    #445545

    Hello Tom,

    Fantastic! That worked perfectly, thanks! Any ideas what I can do to get the social icons displaying underneath my pullout menu? I saw the hook for the pullout menu and attempted it, however it would not display the widget.

    Thanks,
    Mike

    #445674

    Leo
    Staff

    This plugin is useful with hooks: https://en-ca.wordpress.org/plugins/widget-shortcode/

    Want to help support GP? Please consider leaving us a review!
    https://wordpress.org/support/theme/generatepress/reviews

    #445701

    Hello,

    Yes I also tried this method. I used an extra menu item then both tried adding php to it and also using another plugin that would allow shortcodes in menu item names. Neither worked. I also tried adding it to the GeneratePress hook for the slideout menu, however it would still not display!

    Seems its going to be hassle… but would be nice if it worked 🙂

    Thanks,
    Mike

    #445724

    Leo
    Staff

    Ahh if you want to add as a menu icon I would suggest just using the built in FontAwesome icons: https://docs.generatepress.com/article/adding-icons-to-menu-items/

    Want to help support GP? Please consider leaving us a review!
    https://wordpress.org/support/theme/generatepress/reviews

    #448097

    Hello,

    Thanks for that, I will check it out and report back. In the mean time I have noticed that when on the desktop view and scrolling down the sticky menu user and shopping cart icons are at a strange place in the menu bar, they are slightly off center… when really they should either be ideally next to the slideout menu icon on the left or over to the extreme right. Any help would be appreciated!

    Thanks,
    Mike

    #448247

    Leo
    Staff

    Can you try adding this CSS?

    .main-navigation.navigation-stick #menu-icons li {
        float: left;
    }

    Want to help support GP? Please consider leaving us a review!
    https://wordpress.org/support/theme/generatepress/reviews

    #448511

    Hello,

    That kinda worked.. LOL.. it has now aligned all the icons to the left and put them in the wrong order! If possible I would like the slideout menu on the extreme left and then the other two icons on the right, that way it matches the mobile view. Is that possible?

    Thanks,
    Mike

    #448730

    Leo
    Staff

    And the logo on the right?

    Want to help support GP? Please consider leaving us a review!
    https://wordpress.org/support/theme/generatepress/reviews

Viewing 15 posts - 1 through 15 (of 21 total)

You must be logged in to reply to this topic.