- This topic has 24 replies, 3 voices, and was last updated 6 years ago by
.
-
Posts
-
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,
MikeLead 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!
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,
MikeTry 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.
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,
MikeSpoke 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; }Try removing that CSS and add this:
#menu-icons li { float: none; display: inline-block; } #menu-icons .slideout-toggle { float: left; }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,
MikeCustomer Support
This plugin is useful with hooks: https://en-ca.wordpress.org/plugins/widget-shortcode/
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,
MikeAhh 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/
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,
MikeCan you try adding this CSS?
.main-navigation.navigation-stick #menu-icons li { float: left; }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,
MikeAnd the logo on the right?
- You must be logged in to reply to this topic.