[Resolved] Mobile Menu

Home Forums Support [Resolved] Mobile Menu

Home Forums Support Mobile Menu

Viewing 15 posts - 1 through 15 (of 43 total)
  • Author
    Posts
  • #233988
    Garth 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

    #234074
    Tom
    Lead Developer
    Lead Developer

    Those 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 ๐Ÿ™‚

    #234085
    Garth Dryland

    Oh, 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

    #234088
    Tom
    Lead Developer
    Lead Developer

    Ah 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.

    #234114
    Garth Dryland

    Shouldn’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

    #234171
    Tom
    Lead Developer
    Lead Developer

    Just 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 ๐Ÿ™‚

    #234178
    Garth Dryland

    Hi Tom

    I just tried that and the menu items remain on the left ?

    #234179
    Tom
    Lead Developer
    Lead Developer
    #234180
    Garth Dryland

    Do 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 ?

    #234207
    Tom
    Lead Developer
    Lead Developer

    I 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.

    #234215
    Garth Dryland

    Hi 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

    #234409
    Tom
    Lead Developer
    Lead Developer

    Ah, you’re using the mobile header.

    Replace #site-navigation with #mobile-header.

    #234440
    Garth Dryland

    Okay 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

    #234565
    Garth Dryland

    Hey 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 ?

    #235101
    Garth Dryland

    Tom

    Assuming you missed this given its unusual not to hear anything in 2 days so bumping post?

    Garth

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