Docs

[Lely]

Hi There,

Please try this:

@media screen and (max-width: 782px){
.sfm-navicon-button:before {
    display: block;
    content: "Meny";
    line-height: 18px;
    font-size: 12px;
    font-weight: lighter;
    text-align: center;
    text-decoration: none !important;
    position: absolute !important;
    left: -128% !important;
    top: 25% !important;
    width: 200%;
    margin: 5px 0 0 0;
    color: #fefefe;
}
}

Hope this helps.

[Eyoael]

Hi Lely

Thanks that worked great. Could you also help me with the question about how to make my logo appear on the left side. I have placed an image in the customizer in the logo image section but it doesn’t appear on the site, not on desktop and not on mobile view.

Thanks

[Lely]

Hi There,

The logo is hidden because of the following custom CSS:

.x-navbar-wrap {
  display: none;
  visibility: hidden;
}

The logo is inside that container. But you have hidden it. Please try to remove that and then add this instead:

nav.x-nav-wrap.desktop, .x-btn-navbar {
    display: none !important;
}

Cheers!

[Eyoael]

Hi Lely,

Ok i see what u mean, i’ll do that. Thanks again for all the help :).

Thanks

[Eyoael]

I saw that the logo doesn’t show in mobile view, do i have to write i media query for this to happen? Can you help?

Thanks

[Nico]

Hi There,

In this case, your logo is hidden together with the nav menu.

As shared above,

remove this custom CSS:

.x-navbar-wrap {
  display: none;
  visibility: hidden;
}

The code above will hide your navbar.

Then add this to hide only the menu in mobile and desktop:

nav.x-nav-wrap.desktop, .x-btn-navbar {
    display: none !important;
}

Then add this code below to transparent the background of superfly:

@media screen and (max-width: 782px)
.superfly-on #sfm-mob-navbar {
    background:transparent;
}

Hope it helps.

Let us know how it goes.

Thanks.

[Eyoael]

Hi,

Thanks for help, it looks good on the desktop view. But the problem that i’m facing now is that on mobile view there is two navbars, one where i can see my logo and no menu and on where i can see the superfly menu without the logo. How can i make it so that i only have one bar on the mobile version where i can both see my logo and my superfly menu?

Thanks

[Lely]

Hello There,

Please use this custom CSS:

@media (max-width: 480px){
.x-navbar {
    background: transparent;
}
.x-navbar-wrap {
    position: fixed;
    z-index: 999999;
    margin-top: -47px;
    max-width: 147px;
}
}

Feel free to adjust the values accordingly.

[Eyoael]

Hi,

Perfect i will, thanks for all the help.

Thanks

[Eyoael]

Hi,

Sorry for asking so much guys but i need one last thing. I have managed to use the css that you have provided me with to place my logo in the perfect position. But then i saw that the scrolling effect which i have on desktop view is showing in mobile view so that where my logo is when you scroll down the background appears white instead of black like the rest of the mobile navbar.

Thanks

[Rahul]

Hey There,

Thanks for writing back!

Would you mind sharing a Screenshot of the issue so that we can take a closer look of the issue?

Thanks for understanding!

[Eyoael]

Hi,

Please look at attachment file for screenshot.

Thanks

[Eyoael]

Hi,

PLease check this

Thanks

[Lely]

Hi There,

Please update previous suggested CSS to this:

@media (max-width: 480px){
.x-navbar {
    background: transparent !important;
}
.x-navbar-wrap {
    position: fixed;
    z-index: 999999;
    margin-top: -47px;
    max-width: 147px;
}
}

The !important will make sure the script for scrolling will not override the transparent background on mobile view.

Hope this helps.

[Eyoael]

Hi guys,

That worked out great. Again thanks for all the help :).

[Author]

Posts