- This topic has 5 replies, 3 voices, and was last updated 3 years, 8 months ago by
.
-
Posts
-
I’d like my menu on mobile to be the words like the picture I’ve included that are scrollable from side to side. Id also like a few social icons to be in the top right.
Is this possible?
Customer Support
Hi there,
it will take a few steps to make that happen.
1. You would need to disable the Mobile Header in Customizer > Layout > header.
2. Disable the Off Canvas Panel in Customizer > Layout > Off Cavnas
3. You can use the Appearance > Widgets -> Header Widget to add your Icons.
4. In Customizer > Layout > Primary Navigation – set the Mobile Menu Breakpoint to 0 so it never switches to the hamburger.
5. Once thats done we can look at the CSS required to make the navigation slide.
Do you have a staging server ? As it may make sense to do the work their first.
I have an option for a staging site but I don’t have it set up yet.
I did however complete all of the steps above and would need your help on CSS if you don’t mind. Thanks.
Try this CSS:
#site-navigation .main-nav>ul { flex-wrap: nowrap; max-width: 100vw; overflow-x: scroll; scroll-snap-type: mandatory; } #site-navigation .main-nav>ul > li { scroll-snap-align: start; } #site-navigation .main-nav>ul > li > a { font-size: 16px; width: max-content; padding: 0 10px !important; text-align: center; }This worked but how do I make tbe logo area smaller and the social icons go to the top right?
The black area is just too large.
Customer Support
Hi Heath,
Try adding this CSS in additional CSS as well:
@media(max-width: 768px) { .site-header .inside-header { flex-direction: row; margin-left: 20px; margin-right: 20px; } .site-header .inside-header .header-widget { margin-right: 0; } .site-header .inside-header .site-logo img { height: 65px; width: auto; } }You may alter the values to your preference.
- You must be logged in to reply to this topic.
