Menu not responsive

[Olex93]

Hi there

I’m trying to ensure that the navbar menu on this site looks good if browsed on tablet or mobile:

TRN Electrical - Electrical installation and maintenance services in the SW

As you can tell by re-sizing the window, currently, when the mobile button is forced - for some reason, the last item on the menu has a different background colour.

On mobile it’s even worse: there seems to be a conflict between the opaque black backround colour and the grey. If I could solve this such that the entire menu was the opaque colour then that would be great.

Thanks all!

[rad]

Hi there,

Thanks for writing in.

The layout only starts responding when its reach the 979px width, hence, you should make the logo and menu width a total of 980px. It happens because its wide (logo and menu) and you’re resizing it smaller than its width. Create a room for your logo and menu and fit it to 980px like changing the logo width and menu font size.

As for the background, it’s because of this custom CSS.

.x-navbar {
    background-color: rgba(0,0,0,0.69);
    border-bottom: none;
}

You made it transparent, and it covers two section. Hence, lighter in the upper section, and darker on the second section where image is. Please add this CSS as well,

@media ( 979px ) {
.x-navbar {
    background-color: rgba(0,0,0,1) !important;
}
}

Thanks!