- This topic has 42 replies, 3 voices, and was last updated 7 years, 4 months ago by Garth Dryland.
-
AuthorPosts
-
October 10, 2016 at 2:56 am #233988Garth Dryland
Hey Tom
I cant seem to control the mobile menu from within customise.
Currently the Menu sits central while the menu items sit to the left.
Changing navigation alignment setting doesn’t appear to alter anything ?
What am I missing ?
Cheers
October 10, 2016 at 9:46 am #234074TomLead DeveloperLead DeveloperThose settings only apply to the desktop menu.
The mobile menu needs to be adjusted with some CSS – what are you trying to do?
Let me know ๐
October 10, 2016 at 10:33 am #234085Garth DrylandOh, okay
I assume then using the navigation search makes the menu act a bit different. One site I have uses nav search and that mobile menu sits left while search sits to the right with menu items on the left.
Whereas on this site I’m not using search and menu sits in the center with menu items sitting to the left.
I just want everything mobile menu related centered on this site.
I found some code on github the other day which i belive may be for this but couldn’t find it again last night. I seem to have trouble locating material on github.
Cheers
October 10, 2016 at 10:36 am #234088TomLead DeveloperLead DeveloperAh yea, that’s correct. If there’s nothing else in the mobile menu it will be centered.
If there’s something else in it then it will be aligned to the left to create symmetry.
October 10, 2016 at 12:06 pm #234114Garth DrylandShouldn’t the mobile menu with no search centralise everything when going for symmetry ?
Presently menu is centered but all menu items are sitting hard left for some reason ?
I could have sworn they use to all be centered when not using search.
Cheers
October 10, 2016 at 7:34 pm #234171TomLead DeveloperLead DeveloperJust a design decision on my part.
Easy to make everything center with some CSS:
@media (max-width: 768px) { #site-navigation, #site-navigation ul ul { text-align: center; } .menu-item-has-children .dropdown-menu-toggle, nav ul ul .menu-item-has-children .dropdown-menu-toggle { float: none; } }
Let me know if that helps or not ๐
October 10, 2016 at 7:49 pm #234178Garth DrylandHi Tom
I just tried that and the menu items remain on the left ?
October 10, 2016 at 7:57 pm #234179TomLead DeveloperLead DeveloperCan I see?
October 10, 2016 at 8:09 pm #234180Garth DrylandDo you still have the front-end credentials I sent you about a month ago for staging.doubledworks.co.nz
Do you need to see front-end or back-end ?
October 10, 2016 at 11:19 pm #234207TomLead DeveloperLead DeveloperI only need to see the front end, but don’t have the login details anymore.
Try adding
!important
after the CSS values I provided (before the semi-colon) just to test if the CSS is being ignored by more specific CSS.October 11, 2016 at 12:16 am #234215Garth DrylandHi Tom
I tried that and across browsers plus I’ve tried other things too but I still cant get it to work.
Weird
I resent the front end details
Cheers
October 11, 2016 at 11:37 am #234409TomLead DeveloperLead DeveloperAh, you’re using the mobile header.
Replace
#site-navigation
with#mobile-header
.October 11, 2016 at 12:31 pm #234440Garth DrylandOkay I tried that and it works. Cool.
I’m a little confused though.
Is there a way in use the mobile menu without having the mobile header ?
Cheers
October 11, 2016 at 11:11 pm #234565Garth DrylandHey Tom
I assume you’re referring to code on Github not GeneratePress itself. I recall the mobile menu appearing inside-header when testing options a few days ago.
Anyway it looks like I have found another one of these pesky type issues. Don’t shoot the messenger haha
Over the last few days I’ve noticed something going on with the main-navigation between 769px and 768px at 100% on firefox and MS Edge plus 125% on Chrome.
It happens using other percentages however viewing sites with these percentages makes sites appear close to equal in physical size across browsers so I typically use them like this.Having said that at 100% the site works as it should on chrome which you may find interesting.
What happens is the menu appears to loose/override the CSS below causing the menu to move up 10px from where it generally sits until 769px before changing to display the mobile menu icon at 768px
In addition to that, other percentages on one or more of these browsers can cause menu to take one more pixel (767px) before the mobile icon appears.@media (min-width: 769px) { .main-navigation:not(.is_stuck) { margin-top: 0; } .main-navigation:not(.navigation-clone) { margin-top: 10px; } }
I tried adding !important before the px but no change for the better.
Also when using the floating menu plus which in my case navigation sits on the right, the items jump hard left a pixel before transitioning into the mobile-header.
You may find it interesting that both of these issues appear so far to be happening at the same percentages on the same browsers like they’re connected.Furthermore I removed the CSS above and the menu jumping from right to left continues however the first issue stops occurring, potentially due to the new position of menu items.
Any suggestion as to what’s going on ?
October 13, 2016 at 5:53 pm #235101Garth DrylandTom
Assuming you missed this given its unusual not to hear anything in 2 days so bumping post?
Garth
-
AuthorPosts
- You must be logged in to reply to this topic.