Docs

[isearchlocal]

Hi, the way i have styled my navbar and header is ideal on desktop… nearly.

however this question is about simply switiching from stacked to in-line when going to mobile view.

as the inline mobile view is perfect. hope that makes sense.

so basically:

#1

desktop: stacked
mobile: in-line

#2

is on the desktop in stacked mode, i would like to add the logo to the navbar on scroll.
i would like it to appear on the left hand side floating, and keep the menu in the middle.

URIL is: http://flightcompensationdirect.com/

hope you can help.

thank you

[Lely]

Hello There,

Thanks for posting in.

1.) Please clarify what you meant inline. I can see this custom CSS:

@media only screen and (max-width: 767px){
.x-navbar {
    display: none; 
}
}

That custom hides the navigation on mobile entirely. To help you better please do give us a screenshot on how you want it to be. Making it inline would is not good in terms of design because there’s not enough space to display everything in one line.

2.) To add the logo, please check this thread:https://community.theme.co/forums/topic/stacked-to-inline-logo-on-scroll/page/3/#post-641650

Hope this helps.

[isearchlocal]

hi, thanks for getting to this quickly.

yes im trying alot of different CSS as the moment as im using superfly aswell.

attached is a screenshot of when i set the site to inline.

this is how i would like it to appear on mobile.

[Rue Nel]

Hello There,

Thanks for the updates and for sending us the screenshot.

To resolve this issue, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media (max-width: 979px){
  .masthead-stacked .x-btn-navbar {
    display: inline-block;
    position: absolute;
    top: -50px;
    right: 20px;
  }
   
  .site .x-logobar {
      text-align: left;
  }
  .site .x-brand {
      max-width: 200px;
  }
}

Hope this helps.

[isearchlocal]

absolutely fantastic support, thank you!

works brilliant.

is there anyway that when it scrolls to have it either:

A – float in the white background as is
B – Have a button appear in the middle instead, the eligibility check button?

— actually there is one other little thing i noticed just now when testing it, when you open the navbar then scroll it doesnt give you the option to close it again. i assume its because the navbar button is fixed at the top.

[Paul R]

Hi,

1. The navbar button is the only way to close your nav.I suggest to have it float with your arrow.

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

@media (max-width: 979px) {
.masthead-stacked .x-btn-navbar {
    display: inline-block;
    position: fixed;
    top: 0;
    right: auto;
    left: 30px;
}

.x-nav-wrap.mobile.collapse.in {
    display: block;
    margin-top: 30px;
}
}

2. To add your button in the middle.

Add this in Custom > Javascript in the cutomizer

jQuery(function($) {
    

if ($(window).width() < 979 && $(window).width() > 480) {
   $('.x-nav-wrap.mobile .x-btn.menu-item').insertAfter('.x-btn-navbar');
}

});

Hope that helps.

[isearchlocal]

hmmm…. didnt quite work right unfortuantely.

I’ve amended it slightly.

What i am left with isnt too bad, but just need the logo to stick now also with the 2 nav bars.

[Lely]

Hi There,

Please also add the following CSS:

@media (max-width: 979px){
.site .x-logobar {
    position: fixed !important;
    width: 100%;
    top: 0;
    z-index: 99999;
}
.site .x-brand {
    position: fixed !important;
    width: 100%;
    top: 0;
 
}
.x-navbar .mobile .x-nav {
    margin: 50px 0 25px;
}
}

See this:http://screencast-o-matic.com/watch/cDiFXKiAKN

Hope this helps.

[isearchlocal]

perfect!

i had been playing around with it in the interim and unfortuantely i think i messed things up a bit.

im trying to change it now to what you sent as that is perfect!

it’s basically at the very top of the page when you scroll back up.

there is a small space with nothing there..

[Lely]

Thank you!

Do let us know how this goes.

[isearchlocal]

hi hopefully its now sorted thanks for your help with it.

im still stuck on adding the logo to the navbar when you start to scroll.

i would like it as attached, i tried the forums and tried placing in the menu but it was squashed to the other menu items.

I need to try and get it on the far left… any ideas please?

thank you

[Lely]

Hi There,

Please update this custom Javascript:

      jQuery(function($) {
    $(window).scroll(function(){ 
        if($(window).scrollTop() <=0) {
              $('.x-navbar').removeClass("x-navbar-fixed-top");
        }
    });
});

To this:

      jQuery(function($) {
    $(window).scroll(function(){ 
        if($(window).scrollTop() <=0) {
              $('.x-navbar').removeClass("x-navbar-fixed-top");
              
        }else{
$(".site .x-logobar").css({"position":"fixed !important", "top":"0","z-index":"99999","left":"0"," display":"inline-block"}});
$("a.x-brand.img").css({"position":"fixed !important", "top":"0","width":"100%","left":"35px"," display":"inline-block","max-width:300px;});
        }
    });
});

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[isearchlocal]

I understand, thank you for the above code however it had no effect.

I have deleted all the CSS and tried it but still no effect…?

[Lely]

Hello There,

Please update to this:

 jQuery(function($) {
    $(window).scroll(function(){ 
        if($(window).scrollTop() <=0) {
              $('.x-navbar').removeClass("x-navbar-fixed-top");
              
        }else{
$(".site .x-logobar").css({"position":"fixed !important", "top":"0","z-index":"99999","left":"0"," display":"inline-block"});
$("a.x-brand.img").css({"position":"fixed !important", "top":"0","width":"100%","left":"35px"," display":"inline-block","max-width":"300px"});
        }
    });
});

There is missing double quote and excess closing curly brace.

[isearchlocal]

thank you lely – unfortunately still no change to the desktop version.

it does slightly skew the mobile version though 🙁

[Author]

Posts