Is there a menu stack that will switch to a hamburger style menu button on mobile phones but be normal on macs/pc’s/iPads etc.
Maybe take a look at the Gator navigator stack:
https://rapidweavercommunity.com/addons/stacks/gator
I don’t know how this stack compares to what you are using already. However Gator has a breakpoint setting; whereby you can control the precise screen width that the mobile mobile menu should be replaced by the desktop menu
The default breakpoint is 996px. So if you were to reduce it to something like 480px, then the mobile menu will only show on mobile sized screens. Everyone else with a screen wider than 480px would see the normal menu.
Plus this stack has a numerous of other useful things, including compliance with various accessibility regulations (like the ability to keyboard tab through the whole menu structure and the drop-downs). Lots of people have said this stack has helped them in the past and offered a good upgrade to the other menu stacks supplied with some of these blank frameworks. Might be worth giving the trial version a test.
Many thanks, I will check it out.
The F6 topbar will convert to a hamburger menu.
Have you downloaded the templates for F6?
You also might want to have a look at the videos Starting with this one.
1 Like
Thanks for this, very helpful.
I have used Top Bar and all is well once I got the hang of using different menu’s for different sized screens. However one issue persists. The Top Bar stack is surrounding the menu with a grey band that extends across the screen, I just cant get rid of it, any idea’s?
You have a URL to at least a test page?
Without a URL it’s hard to say.
Okay,
I see what you mean.
There is a CSS variable being set var(--topbar-background). It set it to light-grey.
I don’t see an option for this in site styles, there might be one or another way to remove the topbar background (@joeworkman?) .
- You can add a background color swatch and selecting the element top-bar and select the color you want(white). Hover if you want to remove the color,or change the opacity that doesn’t work. The grey is still in the background.
- Another option is to use a background swatch that uses a CSS selector or
.top-bar ul, and set the custom CSS background tobackground-color: none;. That would override the grey so you could also add a custom color with less opacity and not have the grey show through. - The third option is to override the CSS variable. That would be done by setting the CSS Var option in the Sitewide CSS code section.
:root {
--topbar-background:none;
}
Thank you so much for your in-depth reply, really appreciated. I will explore your thoughts and hopefully resolve it. If not I will defer to @joeworkman
This is really helpful, I used option 1 as it was the most straightforward, it did remove part of the gray band but not all of it! Would you mind revisiting the URL again? Many thanks
Yeah, apparently the top-bar element selector(used in option 1) doesn’t have a high enough “specificity”.
I’d personally use option 3. I don’t know why @joeworkman doesn’t have that as an option in site styles.
Some of these are user selectable, but I think All of these variables should be:
--primary-contrast:var(--white-color);
--secondary-contrast:var(--black-color);
--alert-contrast:var(--white-color);
--warning-contrast:var(--white-color);
--success-contrast:var(--white-color);
--header-color:var(--black-color);
--subheader-color:var(--dark-gray);
--small-color:var(--medium-gray);
--text-color:var(--black-color);
--link-color:var(--primary);
--link-color-hover:var(--primary);
--selection-background:var(--primary);
--selection-text:var(--white-color);
--body-background:var(--white-color);
--link-decoration:none;
--link-decoration-hover:none;
--overlay-color:rgba(0, 0, 0, 0.5);
--offcanvas-size-small:250px;
--offcanvas-size-medium:250px;
--offcanvas-size-large:250px;
--menu-text-color:var(--text-color);
--menu-link-color:var(--link-color);
--menu-link-color-hover:var(--link-color-hover);
--menu-bg-color:transparent;
--submenu-bg-color:var(--white);
--submenu-border:1px solid var(--medium-gray);
--menu-caret-color:var(--link-color);
--menu-border-accent:2px solid var(--menu-link-color);
--topbar-background:var(--light-gray);
--titlebar-background:var(--black-color);
--titlebar-color:var(--white-color)````
Yeah!! The grey bar has gone, thanks so much to all who have helped. 
There is a Top Bar swatch that was made specifically to style Top Bar. You should use that.
I did try this but it didn’t work? anyhow the ‘option 3’ worked so all is well. Thanks for the reply
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.