[TeranoxParticipant]

could be good but not forced to be that way.

[RadModerator]

Hi there,

It would be tricky, hiding it while scrolling up? When it should display, since when it reached zero scroll top then scroll event will not be triggered anymore. Scroll event is where it will be hidden or displayed, hence, it will still be hidden even if it reach zero scroll top.

I guess, it would need complex javascript as the bar isn’t the same as X navbar. I tried but faulty, it’s the reverse of the thread I provided. Though, I may just misunderstand what you’re trying to achieve, why not just make the bar static so it wont move as you scroll, so it doesn’t need to be hidden.

Thanks!

[TeranoxParticipant]

ok so let’s start back.

Ho could we do to at least make the admin bar visible again? Because right now it’s hidden under the red band navbar. I need those tools….

let’s keep both always visible then.

[ChristopherModerator]

Hi there,

Please add this :

.logged-in .sfm-navicon-button,.logged-in #sfm-mob-navbar {
    top: 29px !important;
}

Hope it helps.

[TeranoxParticipant]

Hi, I’ve a dded the code, admin bar is now showing but when i hover on it to display options that part stai behin the red bar…

see the picture attached

[TeranoxParticipant]

As well as the bug mentionned before this one,
Don’t know why but all of sudden, the X menu re-appeared under the superfly menu (only on mobile),

Can you see what is going on and what code should i use to get rid of it?

Thanks.

[JoaoModerator]

Hi There,

Please add the following code to Appereance Customizer Custom CSS

.x-navbar {
display: none !important;
}

Hope that helps

Joao

[TeranoxParticipant]

And about the admin bar bug that was asked just before?

(see the past post for the attachement)

Hi, I’ve a dded the code, admin bar is now showing but when i hover on it to display options that part stai behin the red bar…

see the picture attached

[TeranoxParticipant]

Christopher,

for the code

.logged-in .sfm-navicon-button,.logged-in #sfm-mob-navbar {
    top: 29px !important;
}

It does work on desktop thanks, however, that does not seems to work on mobile. No big deal as I don’t edit the website on mobile but wonder why. Thanks.

and dont’t forget my question about:

Hi, I’ve a dded the code, admin bar is now showing but when i hover on it to display options that part stai behin the red bar…

see the picture attached (see the past post for the attachement)

[RadModerator]

Hi there,

Have you tried clearing your mobile browser’s cache? Or fixed or relative positioning isn’t applied on mobile.

About your other question, it’s because of z-index: 999999; within #sfm-mob-navbar { }

z-index controls the layer order of the elements. The higher the value, the more it covers all elements. You can play it from zero value and increase it until you got your desired result.

Thanks!

[TeranoxParticipant]

Hi,

So I’m still having this problem with the X-navbar showing on mobile…..

Currently to resume I use 2 codes, fist one is to make the red band navbar with logo matching the superfly hamburger at top left that you gave me:

@media screen and (min-width: 782px){.superfly-on #sfm-mob-navbar {    display: block;}#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;}#sfm-mob-navbar a {    display: inline-block;    min-width: 100px;}#sfm-mob-navbar img {    height: 50px;    display: inline-block;    margin-top: 6px;}}
@media ( min-width: 980px ) {
.x-navbar {
display: none !important;
}

The second one (that seems to repeat itself from last code line) is to hide the x-navbar

.x-navbar {
display: none !important;
}

This is only hapening on mobile. I’ve tried on my real mobile and also the mobile emulator fro chrome debug tool. Yes i’ve cleared the cache and obselete files.

Is there an other .x-navbar that apply to mobile and that we forgot to mention in the code?

Thanks to let me know quickly as a lot of people are visiting the website this week and it look really ugly and not pro.

again my website is http://www.pimentsfortsquebec.com/

[TeranoxParticipant]

Following my preview post from a few minutes ago, This seems to also apply to tablets and other screen sizes other dans full widh screen.

[TeranoxParticipant]

***************FIXED****************

By adding the second code before the first one it seems to work, Just learned that order matter..

So for the final code to work, this will be:

.x-navbar {
display: none !important;
}

@media screen and (min-width: 782px){.superfly-on #sfm-mob-navbar {    display: block;}#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;}#sfm-mob-navbar a {    display: inline-block;    min-width: 100px;}#sfm-mob-navbar img {    height: 50px;    display: inline-block;    margin-top: 6px;}}
@media ( min-width: 980px ) {
.x-navbar {
display: none !important;
}
}

Hope this could help someone 🙂

BTW, Even with playing with the Z index, the red band was always hiding partially or completely the admin bar, i was tired of that so i’ve installed a plugin to get the admin bar at the bottom but I would have liked it to remain at the top….

Would there have been a way to maybe insert a code somewhere that check if the admin bar is showing and if so, to insert a div the size of the navbar so the navbar would be at the top instead of being under/over the red band?

[Nabeel AModerator]

Hi again,

Glad you’ve sorted it out. To check if admin bar is visible you can use the following class .admin-bar with your element class and adjust it’s z-index for example:

.admin-bar .your-target-class {
    z-index: 0;
}

This will set your-target-class z-index to 0 only when admin bar is visible. Hope this helps!

[Author]

Posts