Menu bar is overlay by the slider in mobile view

HI,

The Menu bar drop down is overlay by the images slider in mobile view.
The front page is okay but the other pages is not overlay. Can you help on this issue?

www.theideashark.com (working well)
www.theideashark.com/about-us (overlay)
www.theideashark.com/services (overlay)
www.theideashark.com/our-work (overlay)
www.theideahsark.com/contact (overlay)
www.theideashark.com/blog (overlay)

Thank you

Bryan Chin

Hello Bryan,

Try adding the following CSS code through Appearance > Customize > Additional CSS.


.header-image{
  z-index: -1;
}

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Regards,
Kharis

Hi,

i have follow your instruction but it s not work. Can you provide alternative solution?

Thank you

bryan chin

Hi,

input the CSS code above mentioned only front page is workable but the other pages are still overlay by the images slider. Besides, the call to action button(click to begin) in front page is not working after i have input the CSS code. Remove the CSS code then the Call to action button is re working.

www.theideashark.com

Please advice.

Thank you

Bryan Chin

Hello there,

I noticed that you applied


.header-slider {
  z-index: -1 !important;
}


Please remove it. Then apply this one:


.header-image{
  z-index: -1;
}


Regards,
Kharis

Hi,

I have followed your instruction to remove the previous code

Then apply the below code but it is not working.

.header-image{
z-index: -1;
}

can you take a look on my website in mobile view?

Thank you.

Bryan Chin

Hello there,

It is working fine on my phone.

Cloudup

Maybe it was just a matter your cache on your mobile browser. Please clear cache or history, then reload your site.

Regards,
Kharis

Hi,

Thanks for your effort for help. I have found a code that broken my page and I have deleted it. Thus, the website looks alright now.

By the way, may I know how to change the opacity of header background colour and menu dropdown colour and opacity? Because I want to change the header colour and menu colour and opacity to match my website colour and look nicer.(In desktop, tablet and mobile view).

Please advice.

Thank you

Bryan Chin

Hello there,

Try adding the following CSS code:


/* Header background */
.site-header {
  background-color: rgba(30,167,176,0.8);
}

.site-header.float-header {
  background-color: rgba(30,167,176,0.9);
}

/* Mobile menu background */
#mainnav-mobi {
  background-color: #1EA7B0;
}  

#mainnav-mobi ul li {
  border-color: #1D939B;
}  

For rgb color code, your can use this tool: http://www.colorspire.com/rgb-color-wheel/

Regards,
Kharis

Thanks bro! it is works! But how can i change the menu bar colour and menu title colour? Because i need to change the menu bar and the title if i change my header background to light colour.

Please advice.

Thank you

Bryan Chin

Hello there,

Try adding this code:


#mainnav ul li a, 
#mainnav ul li:before {
  color: #fff000;  
}  

#mainnav ul li a:hover {
  color: #fff000;  
}  

.btn-menu{
  color: #fff000;
}

Regards,
Kharis

Thanks for your helps. Appreciate your supports much.

Can i know how i delete the Site Header (black background) and remain Logo and Menu bar? as shown in the images. On top of that, can i have the CSS code

  1. only delete the site header for mobile view only?
  2. delete the site header for all mobile, desktop an tablet view.

chttp://www.theideashark.com/wp-content/uploads/2016/12/IMG_3133.png

Thank you so so much if you could help.

Bryan Chin

Hi Bryan,

Try adding this code:


.site-header{
  background: transparent !important;
}
  
.site-header.float-header{
  background: transparent !important;
}

@media only screen and (max-width:991px){
  
  .site-header,
  .site-header.fixed{
    position: absolute !important;
  }
  
}

Regards,
Kharis

Hi Karis,

Thanks for your promptly reply. This code is work but for all 3 type of devices. Can i have a specific CSS code for just make the site header transparent 1) only my mobile view? and 2) mobile and tablet view?

Thank you so much.

Bryan Chin

hi Kharis,

According to the CSS code you provide to me previously. The menu title colour changed only for desktop view but the mobile view is not working.

www.theideashark.com

Please advice.

Bryan Chin

#mainnav ul li a,
#mainnav ul li:before {
color: #fff000;
}

#mainnav ul li a:hover {
color: #fff000;
}

.btn-menu{
color: #fff000;
}

Hello there,

To do transparent header bar only on non-desktop screens, try to revise the CSS code becomes:


@media only screen and (max-width:1024px){

  .site-header{
    background: transparent !important;
  }
    
  .site-header.float-header{
    background: transparent !important;
  }

}

@media only screen and (max-width:991px){
  
  .site-header,
  .site-header.fixed{
    position: absolute !important;
  }
  
}

Regards,
Kharis

Hello there,

To manage the mobile menu item color on mobile screen mode, use this code:


#mainnav-mobi ul li a{
  color: #fff000;
}

Regards,
Kharis