[TeranoxParticipant]

Hi I got Superfly with X-Theme and i’m impressed! I’ve successfully hidden the X-Theme menu, I’ve set-up the SF Menu as I wanted but one thing remain….. I Would like the sfm-mob.navbar to be seen on desktop.

I want my users to experience the website almost the same on both mobile and desktop. So how to make this look the same?

To resume, on mobile i have a 62px red band on top with the logo top-centered. I want that same visual on desktop. How can I achieve this? (and is theme a way to use a different image for this bar and for the sliding menu? (wide text logo for the bar and an square image for the panel)

(see images attached)

[Rue NelModerator]

Hello There,

Thanks for writing in! To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look? 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.

To do this, you can make a post with the following info:
– Link to your site

– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thank you.

[TeranoxParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please add following code in Customize -> Custom -> CSS :

@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;
}
}

Hope that helps.

[TeranoxParticipant]

I’ve added the code to the css customizer on Customize -> Custom -> CSS
(BTW, what is the difference between this editor and the other one that simply say edit?)

This does not seems to have done anything (that i can see).

On mobile I have the hamburger included in a red band navbar with logo centered on it,
But on desktop there is only the square hamburger placed top left.

I’ve cleared the cache and refreshed, even used 2 browsers but nothing has changed.

Did I’ve did it wrong?

[JoaoModerator]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

Joao

[TeranoxParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Sorry, a typo mistake.

Please add this code :

@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;
}
}

Hope it helps.

[TeranoxParticipant]

This code does the trick! Thanks,

Can I request one more thing about it?

I would like to be able to show 2 different logos. One for the red band nav bar and one for the the sliding menu. How can I chose a different image for the nav bar? I would like to place my “piments Forts Quebec” text image instead of the skull logo that is on it and on the sliding menu.

Thanks 🙂 we’re almost there!!!

[RadModerator]

Hi there,

Which one do you wish to change? The one on flying menu, or on the navbar? Please add these code to Admin > Appearance > Customizer > Custom > Javascript.

//change the logo from flying menu
jQuery ( function( $ ) {

$('#sfm-sidebar .sfm-logo a img').attr('src','http://domain.com/change/this/url/to/your/preferred/image.jpg');

} );

//change the logo from navbar
jQuery ( function( $ ) {

$('#sfm-mob-navbar a img').attr('src','http://domain.com/change/this/url/to/your/preferred/image.jpg');

} );

Cheers!

[TeranoxParticipant]

Thanks,

I’ve just realised a little bug with the navbar,
My WordPress Admin bar is hidden under it. Is there a way to make the wordpress admin bar static at the top so even the admin bar would not hide the website. (I mean the page would start after the admin bar so there will be the admin bar, then the navbar, then the page (instead of having the admin bar over the nav bar that is over the web page) one under the others.

Thanks.

[TeranoxParticipant]

Ok so the code broke the website and shut it down. Had to go through ftp to remove the code provided.

I’ve used this

//change the logo from navbar
jQuery ( function( $ ) {

$('#sfm-mob-navbar a img').attr('src','http://www.pimentsfortsquebec.com/wp-content/uploads/2016/04/PFQ-LOGO-2016-X.png');

} );

It is 2000 x 338 pixels png file. 198kb

Am I doing something wrong?

[TeranoxParticipant]

Ok, found out why it wasn’t working…I was placing it in function.php…..

Now that the code is on Admin > Appearance > Customizer > Custom > Javascript. everything is fine for the new logo ***THANKS***

Now There is only one last bug about the navbar, the one previoulsy mentionned 2 post ago”

***My WordPress Admin bar is hidden under it. Is there a way to make the wordpress admin bar static at the top so even the admin bar would not hide the website. (I mean the page would start after the admin bar so there will be the admin bar, then the navbar, then the page (instead of having the admin bar over the nav bar that is over the web page) one under the others.

Thanks.***

[TeranoxParticipant]

***about the previsou post***

Is there a way to make the navbar sliding up the screen to dissappear when we scroll down the page (to get more real estame for the content).

I don’t know if you understand what I mean but there is an example of it here: http://m.huffpost.com/us/mobiletos

See when going down the screen the bar dissapear by sliding up, then if you scroll up, the navbar slide back on screen.

I Guess it would be a modification of your precedent script:

@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;
}
}

[RadModerator]

Hi there,

Hmm, it would be tricky since it has it own menu styling. Would you mind trying this out?

https://community.theme.co/forums/topic/i-need-sticky-navigation-header-to-appear-only-when-scrolling-up/

And about the admin bar, do you wish for it to move as you scroll as well? Like a fixed navigation.

Thanks!

[Author]

Posts