Docs

[Eyoael]

Hi guys!

Need some help. I’m currently usin the following css to display my mobile navbar on desktop:

body .sfm-navicon-button:after {
top: 0%;
left: 21px;
font-size: 20px;
font-weight: bold;
}

media screen and (max-width: 782px){
.sfm-navicon-button:before
display: block;
content: “Meny”;
line-height: 20px;
font-size: 20px;
font-weight: bold;
text-align: center;
text-decoration: none !important;
position: absolute !important;
left: 50% !important;
top: 25% !important;
width: 200%;
margin: 5px 0 0 0;
color: #23282d;
}

@media screen and (min-width: 782px){
.superfly-on #sfm-mob-navbar {
display: block;
}

#sfm-mob-navbar {
display: none;
height: 52px;
width: 100%;
-webkit-backface-visibility: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 999999;
text-align: center;
-webkit-transition: all 0.4s cubic-bezier(0.215, 0.061, 0.355, 1);
-moz-transition: all 0.4s cubic-bezier(0.215, 0.061, 0.355, 1);
-ms-transition: all 0.4s cubic-bezier(0.215, 0.061, 0.355, 1);
-o-transition: all 0.4s cubic-bezier(0.215, 0.061, 0.355, 1);
transition: all 0.4s cubic-bezier(0.215, 0.061, 0.355, 1);
-webkit-transition-delay: .05s;
transition-delay: .05s;
}
#sfm-mob-navbar a {
display: inline-block;
min-width: 100px;
}
#sfm-mob-navbar img {
height: 50px;
display: inline-block;
margin-top: 6px;
}
}

The problem that i’m having is that on the desktop my menu icon button base color is black, i have changed the color to white in the superfly setting but it is not having any effect, secondly on mobile view the menu text doesn’t show but the menu icon button displays correctly. Can you guys help me solve these problems??

Thanks
Eyoael

[Jade]

Hi Eyoael,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[Eyoael]

This reply has been marked as private.

[Christopher]

Hi there,

Please close curly bracket at the right place for following code :

	@media screen and (max-width: 782px) {
		#sfm-mob-navbar  {
			display: none;
			height: 62px;
			width: 100%;
			-webkit-backface-visibility: hidden;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999999;
			text-align: center;
			-webkit-transition: all 0.4s cubic-bezier(0.215, 0.061, 0.355, 1);
			-moz-transition:all 0.4s cubic-bezier(0.215, 0.061, 0.355, 1);
			-ms-transition: all 0.4s cubic-bezier(0.215, 0.061, 0.355, 1);
			-o-transition: all 0.4s cubic-bezier(0.215, 0.061, 0.355, 1);
			transition: all 0.4s cubic-bezier(0.215, 0.061, 0.355, 1);
			-webkit-transition-delay: .05s;
			transition-delay: .05s;
		}

The correct format is :

@media (max-width:767px){
/* CSS goes here*/
}

Hope it helps.

[Eyoael]

Hi,

No it’s not working. When i write the media query that you have suggested the mobile navbar disappears, i want my mobile navbar to show on desktops. I’m i doing something wrong?

Thanks

[Joao]

Hi There,

If you would like to have the mobile navbar to replace your standard navbar on desktop please add the following code to Appereance Customizer CUstom CSS

@media (max-width: 2000px) {
    a.x-btn-navbar {
        display: inline-block;
        float: right;
    }
   .x-nav-wrap.mobile.collapse.in {
      display: block;
    }
   .x-nav-wrap.desktop {
    display: none;
   }
}

Hope it helps

Joao

[Eyoael]

Hi,

This is not working either. I should mention that i’m using superfly menu as my mobile menu and that it is that menu that i want to be displayed on desktop view.

Thanks

[Paul R]

Hi,

You can try this code instead.

.sfm-navicon-button:before {
    display: block;
    content: "Meny";
    line-height: 20px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    text-decoration: none !important;
    position: absolute !important;
    left: 50% !important;
    top: 25% !important;
    width: 200%;
    margin: 5px 0 0 0;
    color: #fff;
}

.sfm-mob-navbar {
    display: block!important;
    height: 62px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    text-align: center;
}

Hope that helps

[Author]

Posts