Mobile menu issues

[rabtheme]

Hello, I am having similar issues that others have had with the latest release regarding the mobile menu. I need the “hamburger” icon centered and need the top menu displayed. I have added the css that I saw mentioned on other posts but it is still not working. Below is my entire additional css.

@media screen and (max-width: 992px){
#masthead .pull-left,
.mobile-menu-icons{
display:flex!important;
float: none!important;
justify-content: center!important;
position: relative;
margin-bottom: 20px;
}
}
.mobile-menu-icons{
top:20px!important;
min-height: 30px!important;
}

/*Top menu visibility fix */
@media screen and (max-width: 992px){
#top-bar-wrap{
display: block!important;
}
}

#colophon .social-icons.phone:before {
content: “\f095”;
}

input[type=submit] {
background-color:#1E73BE;
color:white;
}

#footer-wrapper, .container{
width:100%;
}

.forcefullwidth_wrapper_tp_banner{

overflow: hidden!important;
}

.entry-content ul, ol{
padding-left: 15px;
}

body.page-template-full-width #content{
padding: 0 50px!important;
}

[Zex]

Hello,

Replace this Part of your Custom CSS code:

@media screen and (max-width: 992px){
#masthead .pull-left,
.mobile-menu-icons{
display:flex!important;
float: none!important;
justify-content: center!important;
position: relative;
margin-bottom: 20px;
}
}
.mobile-menu-icons{
top:20px!important;
min-height: 30px!important;
}

/*Top menu visibility fix */
@media screen and (max-width: 992px){
#top-bar-wrap{
display: block!important;
}
}

with the next:

@media screen and (max-width: 992px){
.mobile-menu-icons{
position: relative!important;
margin:10px;
    }   
#agama-logo{   
flex-direction: column!important;
}
#menu-top{
 display: flex!important;
 flex-direction: row!important;
}
.top-navigation li{
 margin-right: 25px!important;  
}
}

So your entire additional CSS should be like this:

@media screen and (max-width: 992px){
.mobile-menu-icons{
position: relative!important;
margin:10px;
    }   
#agama-logo{   
flex-direction: column!important;
}
#menu-top{
 display: flex!important;
 flex-direction: row!important;
}
.top-navigation li{
 margin-right: 25px!important;  
}
}

#colophon .social-icons.phone:before {
    content: "\f095";
}

input[type=submit] {
background-color:#1E73BE;
color:white;
}

#footer-wrapper, .container{
width:100%;
}

.forcefullwidth_wrapper_tp_banner{

        overflow: hidden!important;
}

.entry-content ul, ol{
    padding-left: 15px;
}

body.page-template-full-width #content{
    padding: 0 50px!important;
}

Regards

[rabtheme]

Perfect, it is working now, thank you! I also discovered that I had accidentally deleted the end of a comment, which was most likely causing the issue. Thank you for the quick response!

[Author]

Posts