Navigation
Archive / 2 questions regarding hiding header on mobile + Superfly Question
This is archived content. Visit our new forum.

Tagged: 

1 2
  • Author
    Posts
  • January 13, 2017 at 7:25 am #1328718
    draper3000
    Participant

    Hi

    I’m trying to implement a SuperFly menu that will only come up during mobile use.

    Questions 1:
    What CSS code would you use to hide the whole header bar (logo and navbar) completely when on a mobile screen?. I’ve googled and found answers which hide the nav bar but they leave the logo and header.

    Questions 2
    On our standard menu I’ve added buttons that link to blank URLS and act as menu headings which open up sub headings..so users can pick from the sub menus. (I’ve implemented this for ‘FAQS’, ‘What We Do’ and ‘Our Work’.

    On Superfly these blank title buttons when pressed now reload the page rather than doing nothing…

    Any ideas?

    Many Thanks

    Jon

    January 13, 2017 at 10:01 am #1328869
    Rahul
    Moderator

    Hey There,

    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.

    January 13, 2017 at 10:39 am #1328924
    draper3000
    Participant

    Whoops sorry…

    it’s

    http://www.stormystudio.com

    January 13, 2017 at 10:40 am #1328925
    draper3000
    Participant

    the Superfly menu is hidden at the moment…

    January 13, 2017 at 2:32 pm #1329152
    Joao
    Moderator

    Questions 1:

    @media(max-width: 480px) {
.x-navbar, .x-logobar {
display: none;
}
}

    Questions 2:

    Please put superfly to work in order that we can take a look.

    Thanks

    Joao

    January 16, 2017 at 3:48 pm #1332641
    draper3000
    Participant

    Hi Many thanks for the answer to Question 1.

    Superfly is now live on the site. (on mobile size screens)

    If you can now help with Question 2 that would be much appreciated.

    If you can let me know how to have it so the buttons with sub buttons can be pressed without reloading the page that would be great… if they could be pressed anymore (not just on the little down arrows) to bring up their sub section of buttons that would be great as well.

    Thanks

    Jon

    January 16, 2017 at 11:58 pm #1333071
    Christopher
    Moderator

    Hi there,

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

    .sfm-pos-left .sfm-indicators .sfm-sm-indicator i:after {
    float: right;
    padding-right: 12px;
}

.sfm-vertical-nav .sfm-sm-indicator {
    width: 100%;
    text-align: right !Important;
}
.sfm-vertical-nav .sfm-submenu-visible > a .sfm-sm-indicator i:after {;
    margin-right: 12px !important;
}

    Hope that helps.

    January 18, 2017 at 6:49 am #1334961
    draper3000
    Participant

    Hi many thanks for the CSS code.

    This has partially worked… if I press any of the Superflyu buttons tab (ones with the a sub section it brings out the sub heading as needeD).

    But if I touch these buttons text or icon it refreshes the page instead of bringing out the sub section of buttons.

    Many thanks for any further help

    Jon

    January 18, 2017 at 10:40 am #1335246
    Joao
    Moderator

    Hi Jon,

    Which menu items you are referring to?

    Let us know,

    Thanks

    January 19, 2017 at 7:15 am #1336599
    draper3000
    Participant

    It’s on the Superfly menu, which is visible on the left when on mobile sized screens.

    When you press a button with a sub heading.
    i.e.’Our Work’, ‘FAQs’, ‘About Us’,

    If you press the button (but not the text or icon on the button) it brings up the sub section of buttons.

    If you press the text or icon it refreshes page instead of opening the sub section of buttons.

    *I don’t want it to refresh.

    Bonus Question: 🙂
    The superfly menu is cool.. and looks good on mobile, or a desktop browser thats scaled down…

    The problem is the SuperFly menu button remains visible no matter what the scale is.. I only want it visible at mobile scale.
    I know Suerpfly has a button that will turn it off on Desktops, but I want it to work on desktops if the browser is scaled down to below 782.

    What CSS can I use to hide the Superfly menu on screens above 782px in width?

    Many Many Thanks

    Jon
    http://www.stormystudio.com

    January 19, 2017 at 12:16 pm #1336991
    Rupok
    Member

    Hi Jon,

    Hope you are doing well. The submenu supposed to be opened by touching the icon not the text. However it should not reload though if you use # as link. So let’s use # as the link for the menu item while adding as custom link.

    You can add this under Custom > CSS in the Customizer.

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

    You might need some other CSS but in that case, enable for desktop and update us or just place within the media query if you can figure out the selector.

    Cheers!

    January 19, 2017 at 1:26 pm #1337108
    draper3000
    Participant

    Brilliant thanks for the help..

    Using # as the link on the buttons worked a treat.

    Unfortunately the CSS code hasn’t helped with the Superfly menu.. it’s still there desktop sized screens…

    January 19, 2017 at 1:52 pm #1337169
    Nico
    Moderator

    Hi There,

    I could see that in your code that it has this code below:

    @media screen and (max-width: 782px)
.sfm-rollback {
    display: none !important;
}

    The code above will not show he superfly menu 782px below instead of not showing it from 782px above.

    Use min-width instead of max-width If you want to show it in 782px below.

    Hope that it is the what you are tying to ask.

    Let us know how it goes

    Thanks.

    January 19, 2017 at 2:26 pm #1337208
    draper3000
    Participant

    Hi Nico

    Thanks but still not sure what to do…

    The code you’ve mentioned is not in my custom CSS…

    There is a setting within the Superfly Menu where you can set:
    ‘Threshold point
    Navbar will appear if screen width is smaller than this point. On mobiles only.
    782p    x

    Perhaps it’s this that is creating that code.

    WHAT AM I TRYING TO ACHEIVE:

    At the moment the Superfly menu is visible at all desktop browser sizes. (it’s button is white so it doesn’t show up till you scroll down on our hoempage)….

    I want the superfly menu to be hidden until the browser is scaled to 782 pixels or below.

    Here’s the CSS I currently have in place which affects the menu:

    `
    /*hide standard mobile nav bar*/
    @media(max-width: 782px) {
    .x-navbar, .x-logobar {
    display: none;
    }
    }

    /*When Suerpfly mobile menu buttons are pressed bring up sub menu witohut leaving page*/
    .sfm-pos-left .sfm-indicators .sfm-sm-indicator i:after {
    float: right;
    padding-right: 12px;
    }

    .sfm-vertical-nav .sfm-sm-indicator {
    width: 100%;
    text-align: right !Important;
    }
    .sfm-vertical-nav .sfm-submenu-visible > a .sfm-sm-indicator i:after {;
    margin-right: 12px !important;
    }

    /*Hide Superfly mobile menu buttons on desktop*/
    @media only screen and (min-width: 782px) {
    .superfly-on #sfm-mob-navbar {
    display: none;
    }
    }

    January 19, 2017 at 2:43 pm #1337241
    draper3000
    Participant

    I’m thinking the last bit of code from Rupok:

    `/*Hide Superfly mobile menu buttons on desktop*/
    @media only screen and (min-width: 782px) {
    .superfly-on #sfm-mob-navbar {
    display: none;
    }
    }

    Is wrong… as that seems to hide the menu on mobile phones… I’ve just removed this section of code and it works on mobile again… now I just need to make that hide it on screens over 782 instead.

  • Author
    Posts
1 2
  • <script> jQuery(function($){ $("#no-reply-1328718 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>