mobile menu Issues with 100% width

[damanagerltd]

Hello I used this links to expand my menu to make it 100% width and now i am having issues with the mobile menu. its not reponsive and not align properly its a mooc header with full width my current custom css below .mooc.fix .container {padding-right:0px !important;margin-left:0px !important; margin-right:0px !Important;width:100% !important;} header.mooc{width:100% !important;} div#mooc_menu {width:65%; !important;} a.smallimg.vbplogin span{margin-left:20px !important;} a.smallimg.vbplogin span {padding:0px 25px 0px 0px !important; margin-top:0px !Important; } @media (max-width: 991px) {#logo{margin:1px 0px 0 !important;}} .open #trigger .lines:after, .open #trigger .lines:before{width:20px !important;}   https://wplms.io/support/forums/topic/change-header-style/ https://prnt.sc/hu9guv https://prnt.sc/hu9h0u https://prnt.sc/hu9hhx    

[Diana]

@damanagerltd, Can you please share your site url in private reply to check this issue at your end.

[damanagerltd]

This reply has been marked as private.

[Diana]

@damanagerltd, Paste this CSS code in wp-admin > Appearance > Customize > Custom CSS a.smallimg.vbplogin span{margin-left:-19px !important;} @media (max-width:991px) { .mooc .topmenu>li>a, .mooc .topmenu>li>a>span { padding: 0px 0px !important; padding-left:20px !important; top:22px !important; } .fa-shopping-basket:before {} } img#header_mobile_logo { height: 17px !important; }  

[damanagerltd]

thanks. Diana   I just did now there is a white line space between the header and logo. also the toggle menu & login are not aligning properly rather they became on top of each other

[damanagerltd]

Hello Diana   I had to revert back to my previous css code as the new one you gave me, users can't signup/login as soon as they put the mouse on the login/signup button, it disappears   this is my code below, maybe you can help me integrate it with yours , I would love to have the full width menu the way it is and also make it mobile responsive. The one you have me wasn't full width header mooc and it has few errors like white space, mobile responsiveness Thank you so much for your time   .mooc.fix .container {padding-right:0px !important;margin-left:0px !important; margin-right:0px !Important;width:100% !important;} header.mooc{width:100% !important;} div#mooc_menu {width:55%; !important;} a.smallimg.vbplogin span{margin-left:20px !important;} a.smallimg.vbplogin span {padding:0px 25px 0px 0px !important; margin-top:0px !Important; } @media (max-width: 991px) {#logo{margin:1px 0px 0 !important;}} .open #trigger .lines:after, .open #trigger .lines:before{width:20px !important;} /**more css for the mobile menu*/ .mooc .topmenu>li>a span {padding-left:13px;} .mooc .topmenu {margin-right: 40px;} header #trigger {right: 10px;} .mooc .topmenu>li>a {padding: 30px 10px;}

[Diana]

@damanagerltd, Let me check this on your website.

[damanagerltd]

This reply has been marked as private.

[Diana]

@damanagerltd, First, choose a small size logo for mobile. when I checked your website and click on login it doesn't disappear. But yes, it is not clickable in mobile view For that: paste this in your wp-admin > Appearance > Customize > Custom CSS @media (max-width: 991px) {header.mooc{ z-index: 13 !important;}}  

[Diana]

@damanagerltd, Try adding this in the editor @media(max-width:991px) { ul.topmenu li a{top:-22px !important;} .mooc .topmenu{margin-right:-20px !important;} .mooc .topmenu .smallimg.vbplogin {margin-left:10px !important;}   }

[pietermonster]

Hi there! I am currently facing kind of same issues. The mobile menu on my full width homepage with transparent header is not clickable. the styling is ok, but <span style="color: #4b4d4d; font-family: Lato; font-size: 14px;">smallimg.vbplogin</span><span style="color: #4b4d4d; font-family: Lato; font-size: 14px;"> and trigger are not responding.</span> Can you guys help me out?  

[Diana]

@pietermonster Yes, we'll surely help you out. But for that you have to create your own topic and share your issue on your topic. It is easier for us to track the issue of a particular user. We can assist you better on your topic

[Author]

Posts