Mobile Menu - Menu Hovers


#1

Hi Guys and thanks for a great theme. A few questions I hope you can help with on our site http://www.mathiouservices.com.au/MSWP2016.

  1. The mobile menu is underneath the header image.
  2. I have added the text-slider widget to the top row of the home page and the text gets cut off in mobile view.
  3. The header image displays differently in Firefox and Chrome.
  4. I seem to have lost all hover changes in the main and sub menus. I did have the text changing color to #FC6400 but now there is no change.

I have added this to the custom css plugin…

.panel-grid .overlay {
display: none;
}
.footer-widgets {
padding: 20px 0;
}
.social-underline .widget-title:after{
background-color: #fff;
}
.mission {
margin-top:320px;
}
.site-header {
background-color: #fff !important; opacity:0.9 !important;
}
.widget-area a:hover
{
color: #FC6400;
}
#mainnav li:hover > .sub-menu > li > a {
background-color: #eeeeee;
color: #FC6400;
}
.btn-menu{
color: #443f3f;
}

Any help much appreciated. Thank you.


#2

Hello there,

Thank you for posting in.

> 1 & 2

Could you please try to add the following CSS code through the Simple Custom CSS plugin?

@media only screen and (max-width: 767px){
  
  .header-wrap .container{
    padding-left: 15px;
    padding-right: 15px;
  }
  
  .header-wrap .col-xs-12{
    width: 50%;
  }
  
  .header-wrap .col-md-4.col-sm-8.col-xs-12{
    text-align: left;
  }
  
  .btn-menu{
    margin-top: 0;
    margin-right: 15px;
    float: right;
  }
  
  #mainnav-mobi{
    top: 28px;
    right: 15px;
  }
  
}

#text-slider{
  overflow: visible !important;
}

> 3

Which one is considered as normal? If possible, please post the screenshots of them here. You can upload your images to the image upload service like http://postimage.org

> 4

There might be other plugin interferes it. Try to temporarily deactivate all non-required plugins. Once you are done, you would need to clear your browser’s cache before reloading your site.

Regards,
Kharis


#3

Thank you for the prompt response Kharis. The css has been added but still the menu is hidden under the header image on mobile. This is my main problem at the moment. I will play around with the rows and plugins to see whether I can fix the other problems.


#4

Hi Kharis. Still can’t work out how to align the header pages so they look the same as on the chrome screenshot attached on all browsers and some type of theme keeping view for mobile? The top of the image seems to get chopped off also whereas I need the top of the image showing and the bottom cropped off. Here is the link to the screenshots http://postimg.org/gallery/35vu7tewq/

Here is the custom CSS I have been playing with.

.site-header {
background-color: #fff !important;
opacity:0.9 !important;
}
.widget-area a:hover
{
color: #FFFFFF;
}
.btn-menu{
color: #443f3f;
}
.sub-menu{
margin-top: 0;
margin-right: 15px;
float: right;
background-color: #fff !important;
z-index:10 !important;
}
.headerintrowidget{
margin-top:350px !important;
margin-bottom:30px !important;
}
.headerintrorow{
margin-top:138px !important;
}

The other major problem that I can’t fix is the main menu displaying underneath this row on mobile. I have played around with z-index but not having any luck.

Any help much appreciated. Thank you.


#5

Hello there,

I would like to apologize in advance for delayed respond.

Could you please try apply the following CSS code?

.headerintrorow {
  margin-top: 0 !important;
}


@media only screen and (min-width: 992px){

  .site-header {
    position: fixed !important; 
  }  

  body.home{
    width: 100% !important;
    position: relative;
    overflow: visible;
    margin-top: 138px;
  }

  .headerintrorow {
    margin-top: 0 !important;
  }

}

To keep your top area of your image not being cut off by the header bar, try to edit your image using image editor application like Photoshop, then add around 138px white space at the top.

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

Regards,
Kharis


#6

Awesome Kharis. Thank you. The header is now perfect although the main menu is still not visible on mobile devices, still opening beneath the header image. Can you advise how to fix this please. Many thanks.


#7

Hello there,

Thank you for updating me.

Regarding the mobile main menu issue, could you please try to apply the following CSS code?

#mainnav-mobi .menu-header-container{
  position: relative;
  z-index: 9999;
}

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

  #pg-221-0 .panel-row-style{
    position: static !important; 
    z-index: 1 !important;
  }  
  
}

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

Regards,
Kharis


#8

Hi Kharis. Unfortunately this didn’t work either. Here is my updated custom css in full just so you can see if anything else is conflicting. We’re almost there…just this to fix. Thanks again for all your help.

.panel-grid .overlay {
display: none;
}
.footer-widgets {
padding: 20px 0;
}
.social-underline .widget-title:after{
background-color: #fff;
}
.site-header {
background-color: #fff !important;
opacity:0.9 !important;
}
.widget-area a:hover
{
color: #FFFFFF;
}
.btn-menu{
color: #443f3f;
}
.sub-menu{
margin-top: 0;
margin-right: 15px;
float: right;
background-color: #fff !important;
}
.headerintrowidget {
text-align: center !important ;
position:relative;
top:380px;
}
.headerintrorow {
margin-top: 0 !important;
height:470px !important;
text-align:center !important;
background-position: center top;
}

@media only screen and (min-width: 992px){

.site-header {
position: fixed !important;
}

body.home{
width: 100% !important;
position: relative;
overflow: visible;
margin-top: 138px;
}

.headerintrorow {
margin-top: 0 !important;
}
.newsletter-firstname{
width: 265px !important;
}
.newsletter-email{
width: 265px !important;
}
#mainnav-mobi .menu-header-container{
position: relative;
z-index: 9999;
}

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

#pg-221-0 .panel-row-style{
position: static !important;
z-index: 1 !important;
}


#9

Hello there,

Thank you for updating me.

I thought we should not to apply the following rules globally. But it should be on desktop only.

.sub-menu{
  margin-top: 0;
  margin-right: 15px;
  float: right;
  background-color: #fff !important;
}

Try to wrap the code above in a media query.

@media only screen and (min-width:1025px){
 .sub-menu{
   margin-top: 0;
   margin-right: 15px;
   float: right;
   background-color: #fff !important;
 }
}

Let me know how it works.

Regards,
Kharis


#10

Thanks Kharis. Still no luck viewing the menu on mobile…isn’t that code more applicable for desktop? This is my entire custom css now…

.panel-grid .overlay{
display: none;
}

.footer-widgets{
padding: 20px 0;
}
.social-underline .widget-title:after{
background-color: #fff;
}

.site-header{
background-color: #fff !important;
opacity:0.9 !important;
}

.widget-area a:hover{
color: #FFFFFF;
}

.btn-menu{
color: #443f3f;
}

.sub-menu{
margin-top: 0;
margin-right: 15px;
float: right;
background-color: #fff !important;
z-index:100 !important;
}

.headerintrowidget {
position: relative;
text-align:center !important;
top:390px;
}

.headerintrorow {
margin-top: 0 !important;
height:470px !important;
text-align:center !important;
background-position: center top;
}

@media only screen and (min-width: 992px){
.site-header {
position: fixed !important;
}
@media only screen and (min-width:1025px){
.sub-menu{
margin-top: 0;
margin-right: 15px;
float: right;
background-color: #fff !important;
}

body.home{
width: 100% !important;
position: relative;
overflow: visible;
margin-top: 138px;
}

.newsletter-firstname{
width: 265px !important;
}

.newsletter-email{
width: 265px !important;
}

#mainnav-mobi .menu-header-container{
position: relative;
z-index: 9999;
}

@media only screen and (max-width:1024px){
#pg-221-0 .panel-row-style{
position: static !important;
z-index: 1 !important;
}


#11

Hello there,

I found some bug from your last code. It should look like the following.

.panel-grid .overlay{
  display: none;
}

.footer-widgets{
  padding: 20px 0;
}
.social-underline .widget-title:after{
  background-color: #fff;
}

.site-header{
  background-color: #fff !important;
  opacity:0.9 !important;
}

.widget-area a:hover{
  color: #FFFFFF;
}

.btn-menu{
  color: #443f3f;
}

.sub-menu{
  margin-top: 0;
  margin-right: 15px;
  float: right;
  background-color: #fff !important;
  z-index:100 !important;
}

.headerintrowidget{
  position: relative;
  text-align:center !important;
  top:390px;
}

.headerintrorow{
  margin-top: 0 !important;
  height:470px !important;
  text-align:center !important;
  background-position: center top;
}

@media only screen and (min-width: 992px){
  .site-header {
    position: fixed !important;
  }
}  
  
@media only screen and (min-width:1025px){
  .sub-menu{
    margin-top: 0;
    margin-right: 15px;
    float: right;
    background-color: #fff !important;
  }
}  

body.home{
  width: 100% !important;
  position: relative;
  overflow: visible;
  margin-top: 138px;
}

.newsletter-firstname{
  width: 265px !important;
}

.newsletter-email{
  width: 265px !important;
}

#mainnav-mobi .menu-header-container{
  position: relative;
  z-index: 9999;
}

@media only screen and (max-width:1024px){
  #pg-221-0 .panel-row-style{
    position: static !important;
    z-index: 1 !important;
  }
}

Regards,
Kharis


#12

Thanks Kharis for all your help. The menu is working now.


#13

Great!

I am glad it is working for you at this time! Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis