Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Issue with menu colour background and image overlay css

Featured Replies

Hi.

I am making some small changes to the html and custom.css files of the WHMCS secrion to more closely match the rest of my website.

I have managed to do most of what I need but have created a bit of a problem which I have spent a couple of days trying to find the cause for. I will have a background image in the header (not currently uploaded) which has a black 50% opacity overlay. For some reason the overlay has stopped the mouseover action for the main menu to work, The cursor doesn't even change to a hand as you pass over the menu items. I have tried changing the z-index of the overlay with no effect. If I turn the overlay class off, the menu works perfectly.

Also I have no idea and cannot find the property that sets the menu background to the green colour. I have spent hours looking at the style sheet and the code. I have used both Google Chrome and Firefox element inspectors and nothing appears to set the menu background colour (screenshot attached)

The webpage can be seen at https://bit.ly/2JyYUuK

Please help me before I loose the will to live with this.

Thanks

Richard

screenshot.jpg

Hi mate,

In Chrome hit F12, you can inspect elements. It's looks like the colour is coming from a psudo element in /customers/templates/madhostinguk/css/theme/theme-color-1.css, .header--navbar-wrapper:before, .navbar-main, or ::selection all use that colour, possibly a superseding issue if they shouldn't as the background colour used 4 times in different places. Quick fix would be use background:url('/path/image.png') after these to overwrite the colour.

Overlay does exactly that, goes over the top. Try setting background opacity of the menu link / button to opacity; no overlay required.

Edit: Fiddle like this.

 

Edited by BrowserBugs

  • Author

Thanks for the reply.

I have managed to sort the background colour issue using an !important flag on the css to override the original colour.

The overlay is over the background image and should be behind the menu container. It should be the same and work like it does on this page https://bit.ly/2sYtnbl

Thanks

 

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.