A mobile menu in the middle

RapidWeaver Classic General
1

Hi, using Foundation, Top Bar and Top Bar surgeon and I’m developing a site in which most of the content will be central on the page. I’ve tried this on other sites but just gave up and thought I’d revisit it. When the screen size is shrunk and hits the mobile breakpoint and shows the mobile menu caret, I can’t seem to get that central (rest of menu is defined as centre alignment) only left or right. Anyone know how this can be done?

I’m sure this could be done with CSS but I’m no CSS expert - was wondering whether it is possible in the settings and I just can’t find it.

Here’s an example of what I mean - just shrink the screen size. Though this isn’t the site I’m developing, just one of my older ones where I gave up trying to solve it. https://www.swcycleworkshop.co.uk

Of course the next question is how I can replace the word / icon combination with one that also is symmetrical…

Thanks

Dave

2

You are asking about TopBar so this answer applies to that. Your linked site above uses MagicGellan and so the CSS would be different for that.

To centre top bar mobile menu (assuming that Title, Slogan and Logo are hidden for mobile in the settings)

.top-bar .toggle-topbar {
    right: 50%!important;
}
.top-bar .toggle-topbar a {
 transform: translateX(50%);
}
3

Thanks Andrew, I’d forgotten I’d used MagicGellan for that site. CSS worked perfectly. Would be a great option to include in TBS!

Thanks again

Dave

4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.