Mobile Navigation
-
The navigation menu on my site is right aligned but when i open it in moblie the it looks very sketchy and not alligned what should i do? I am on premium plan so i can’t install plugins
The blog I need help with is: (visible only to logged in users)
-
Hi there,
I’m unable to locate a navigation menu on the desktop or nor mobile version of the site. Here’s a screenshot of what I’m seeing when I visit http://shishukunjmun.in.
When you have a moment, can you provide us with more details about the navigation menu’s location on the site? Thanks!
-
-
Hey there,
Many thanks for reaching out.
It looks like the headers are contained in the pages themselves, and not in the templates.
They should ideally be placed in the site editor here: https://shishukunjmun4.wordpress.com/wp-admin/site-editor.php?path=%2Fwp_template
This would also save time in the long run when updating the menu, as you would only need to update the menu in one place.
This is a great webinar on how headers and navigation works:
I hope this helps!
-
-
Hi again,
I’m not sure I understood this, so I’m hoping you can clarify:
The navigation menu on my site is right aligned but when i open it in moblie the it looks very sketchy and not alligned what should i do
I believe the issue here is that you have created your “header” for each of the “sub-sites” you are setting up by using a Columns Block with the header in one column, and the navigation menu in the other.
In the way that WordPress sites are typically built, columns are not used in the construction of the header, instead, a special block called the “Row block” is used instead. This block ensures that the logo and menu are spaced correctly, and more importantly, the Navigation block functions correctly when placed inside of this container instead.
You can see how to switch from columns to row blocks in the video I recorded at this link.
Hope that helps. Please let us know if you have any more questions.
-
I cant right align the navigation on the header. if right align the row the logo changes a but then navigation also becomes left aligned
Check the mobile navigation, open with the button and look at the alignement of the text you will see it
-
Hi there,
I checked the mobile view, and this is what I am seeing:
The navigation is in the header (albeit as a hamburger menu) and is right-aligned. When you click the menu to expand, the submenu texts are also right-aligned. Is this what you are seeing and is this the preference you are referring to?
-
-
-
Hey there,
Many thanks for reaching back out with that confirmation.
What alignment are you looking to change exactly? Also, when you mention that the menu is “sketchy” what are you looking to change exactly?
Many thanks.
-
i am looking for align it on the side after we open it with the button but the button should be on the right only
-
Hey there,
Got it, so this CSS would be needed in that case:
/* Float menu menu left AL FR*/ .wp-block-navigation.is-responsive .is-menu-open .wp-block-navigation-item { align-items: baseline; } .wp-block-navigation.is-responsive .is-menu-open .wp-block-navigation__container { align-items: baseline; }This can be added via Appearance > Customize > Additional CSS.
Many thanks in advance.
-
-
When you say fully left, can you provide a little more detail about how far to the left you would like the text to appear? And are you still wanting the sub-page indentation to continue, or, are you wanting all menu items in mobile to appear as far to the left as possible? Any specific details you can provide will help.
-
I do want the indentation to continue
Yes I have been wanting to menu items to be as far left as possible but without changing the button layout
-
Hello there,
Please add the following CSS code below any other existing code in order to move the menu items further to the left while maintaining the indentation and keeping the button where it’s currently located.
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { flex-direction: initial; }Please feel free to reply to this message if you have any other questions and have a great day!
-
-
-
Hey there,
To close that gap, you could try also:
/* Float menu left AL FR */ .wp-block-navigation.is-responsive .is-menu-open .wp-block-navigation-item { align-items: baseline; } .wp-block-navigation.is-responsive .is-menu-open .wp-block-navigation__container { align-items: baseline; } .wp-block-navigation.is-responsive .is-menu-open .wp-block-navigation__responsive-container-content { align-items: baseline; }I’ve added this to the site to test this out and it looks like it’s doing the trick. :)
Are you able to confirm you’re seeing that also please.
Many thanks.
- The topic ‘Mobile Navigation’ is closed to new replies.
WordPress.com Forums 