Top bar menu not responsive

BB Theme
1

Hi support,

My latest BB site has gone live today, it’s looking great with good feedback however we’re seeing problems with the top bar menu on mobiles. It doesn’t seem to be resposive at all, can you take a look and suggest a fix please?

Thanks,

Gerry

2

Hi support,

I forgot to give you the URL http://www.skylightnewcastle.co.uk

Thanks,

Gerry

3

Hey Gerry,

This is caused by the additional CSS you’ve added to make the menu fixed. You’re gonna have to add media queries to make it mobile reponsive.

Ben

4

Hi Ben,

OK, thanks I’ll need to look into this. There’s also mobile problems with the content in the testiminials section and that below clashing on mobile. Any thoughts how I might fix that?

Thanks,

Gerry

5

Hi Ben,

I’ve fixed the problem with testimonials, the problem was that I’d asigned a fixed height for the testimonials. I’ve removed that. just the problem with menu now.

I’m wondering if the best option may be to go for a more conventional ‘Header Menu’ as opposed to ‘Top Bar’ and do what I can to style it as close as I can get to what I have now. Your opinion would be valued :slight_smile:

Thanks, Gerry

6

Hey Gerry,

That works too! As we have a fixed header available. That should take care of your problem as it should be fully responsive. But if you really want to keep your current design, you can go for the media query route. You can even set the testimonial to a fixed height(so it doesn’t jump up and down) per device via the min-width/max-width media type.

Ben

7

Hi Ben, thanks for support!

My client loves the current menu style so I’d like to stay as close to that as I can, I’m not sure how far that would be possible using the fixed header menu but to be honest applying the media query fix to current menu is a bit beyond me. Any help you could give would be most appreciated:)

As for the testimonials, I had previously applied the fixed height CSS but that seemed to cause the problems on mobile.

Thanks, Gerry

8

Hi Ben,

I’ve changed to the fixed header menu and solved the problem on mobile, I’ve now got a proper mobile menu. As usual though one thing leads to another, there are a couple of issues I’d appreciate some help with please. Although I’ve now disabled the top bar the space that it occupies is still showing by way of a band at the head of the page above the menu. Is there a way to remove this?

Also, when I scroll down the page when viweing on laptop the centred main menu offsets to the right and goes on to 2 lines instead of the normal one. Do you know of anyway to solve that?

Thanks,

Gerry

9

Hi Ben,

I’ve solved the top bar space by removing padding in the heading via customiser.

Just one thing now please, is there away to prevent main menu going on to 2 lines when scrolling down?

Thanks,

Gerry

10

Hey Gerry,

You can try adding these CSS snippets. They shouldn’t have any problems with the mobile responsiveness of the site since the fixed header is disabled on mobile view.

.fl-page-header-fixed .row > div:first-child {
  display: none;
}
.fl-page-header-fixed .row > div:nth-child(2) {
  width: 100%;
}

Hope this helps!

Ben