Archived topic
Several menu fixes
30 replies · Started by Moses on November 17, 2017
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);
}
/*----------------------*/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/
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?
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
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
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
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
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?
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?
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
You would add in with a space in between exactly like how you have it above.
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>I did, this way the only first class work
I wrote hide-on-desktop hide-on-tablet and it's only hidden on desktop
.slideout-toggle:not(.custom) {
display: none;
}
didn't work as well :(
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.
