How to Display Slider Under Nav Bar When Viewing on Mobile Device & Other Things!

Support
#1

Hi, I’m working on a website and I’m hoping you’ll be able to help me with the following please:
(I’ll put the website in a secure note along with the password to view it as I’ve got a maintenance page up at the minute)

  1. When viewed on an iPad and smartphone, the mobile nav button needs to be centred
  2. When viewed on a smartphone the facebook icon goes over the top of the logo, how can I move the logo down?
  3. When viewed on an iPad and smartphone, can the slider be moved under the nav bar as you can’t see it properly at the minute
  4. When viewed on an iPad the nav bar obscures most of the page, as it splits over a few lines!

Thanks!

#2

Hello There,

Thanks for writing in!

1.) To center the mobile nav icon, and

2.) To move the logo down, add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media(max-width: 979px){

  .x-navbar {
    text-align: center;
  }

  .masthead-inline .x-btn-navbar {
    display: inline-block;
    float: none;
    text-align: center;
  }
    
  .x-topbar {
    height: auto !important;
  }

  .x-topbar .p-info {
    width: auto;
    max-width: 80%
  }
}

3.) This happens because you have added this css:

.x-navbar-fixed-top-active .masthead {
    position: absolute;
    top: 0;
    width: 100%;
}

You might need to update it and make use of this code instead:

@media(min-width: 980px){
  .home.x-navbar-fixed-top-active .masthead {
    position: absolute;
    top: 0;
    width: 100%;
  }
}

4.) This happens because there is no longer enough space for the menu and the logo. I would recommend that you adjust your menu item spacing and resize the logo image as well.

Hope this helps.

#3

Hi, thanks for the help, however there are still a few things:

  1. The logo is still obscured by the topbar. I’ve tried adding margin to the bottom of the topbar but it doesn’t make any difference.

  2. I’ve added in the code, but the slider is still in the same position, it hasn’t moved to under the nav bar. Also, I don’t just want it to be moved on the Home page, I’d like all the other pages with the slider under the masthead to move to under the nav bar when viewed on an iPad or mobile.

  3. Isn’t there any CSS code which can be added to make the logo and nav bar text smaller when viewed on an iPad or mobile?

Thanks!

#4

Hi,

1 & 2) You can add this in Custom CSS

@media (max-width: 890px) {
.x-topbar {
    height: 79px !important;
}
}


@media (max-width: 832px) {
.x-topbar {
    height: 98px !important;
}
}

@media (max-width: 448px) {
.x-topbar {
    height: 130px !important;
}
}
  1. You can add this in Custom CSS 
@media (max-width: 1300px) {
.x-nav-wrap.desktop {
    display:none;
}

.x-nav-wrap.mobile {
    display:block;
}
.x-nav-wrap.mobile.collapse {
    display:none;
}

.x-nav-wrap.mobile.collapse.in {
    display:block !important;
}
.masthead-inline .x-btn-navbar {
    display: inline-block;
    float: none;
    text-align: center;
}
.x-brand img {
    width: 200px;
}
}

Hope that helps

#5

Hi, thanks for the CSS, but it’s still obscuring the logo - I don’t know what I’m doing wrong! I’ve included screengrabs of each view in Cornerstone to show you how I’m viewing it. The one showing the view 980px - 1199px is good apart from the nav button being too close to the logo and it being obscured by the top bar! It’d be great if it could be justified right and below the top bar.

Sorry for being a pain!

Thanks!

#6

Hello There,

Your topbar is ontop of the slider because you have made it fixed and used this custom css:

.x-topbar {
    position: fixed;
    width: 100%;
    min-height: 40px;
  height: 45px;
}

You will have to update the code so that it will only take effect in larger screens. You can make use of this code instead:

@media(min-width: 980px){
  .x-topbar {
    position: fixed;
    width: 100%;
    min-height: 40px;
    height: 45px;
 }
}

Hope this helps. Kindly let us know.

#7

Hi, thanks for the CSS! I’ve changed the CSS to what you suggested and I’ve added in some other code so the gap above the logo wasn’t as big when viewed on a mobile device, so that’s sorted that for some of the views, however, there are still a couple of things:

  1. The view 980px-1199px still has the logo and mobile nav bar button under the top bar - please see attached screen grab). Can the logo be under the top bar and the mobile nav button be moved under the top bar and justified to the right of the page please.

  2. The views ‘768px-979px’, ‘481px-767px’, ‘480px & smaller’ is still showing the slider under the nav bar and logo bar instead of starting under them, as you can’t really see much of the slider how it is - please see attached screen grabs.

Thanks!

#8

Hi There,

Just to explain what is happening, making certain element, in this case topbar fixed means it is floating. It will take space on top of every other content. That means the logo and the menu will go behind the topbar. Now, it is not happening on large screen size because you have set NAVBAR TOP LOGO ALIGNMENT (PX) to be 60px. It moves the logo down.

Then those margin top 60px from settings was overridden by your custom CSS, from 60px values, it is now 20px. This then move the logo up again behind the fixed topbar:

Now to solve this issue, please remove that CSS that define margin top inside 1300 media query, and then add this instead:

@media (min-width: 980px) and (max-width: 1199px) {
body.x-navbar-fixed-top-active .x-navbar-wrap {
    margin-top: 45px;  /*45px is the height you specified for the topbar*/
}
.masthead-inline .x-btn-navbar {
    display: inline-block;
    float: right;
    margin-top: 79px; /*Depending on the height of the logo, adjust this to center the mobile button vertically*/
}
}
@media (max-width: 978px){
.x-brand {
     margin-top: 20px;  /*On this 978px width is where we need to adjust margin*/
}
}

Then remove this custom CSS too:

Please be careful on adding CSS inside media query. Make sure that it is on specific size only. To test it, we can always use browser developer tools: https://developer.chrome.com/devtools

Hope this helps.

#9

Hi, that is great, thank you! I appreciate you explaining what was going wrong and why too!

The only thing now is that the slider needs to start under the logo instead of behind it when viewed on ‘768px-979px’, ‘481px-767px’, ‘480px & smaller’.

Thanks!

#10

Hi There,

Add this on Theme Options > CSS

@media (max-width: 979px) {
	.x-navbar-fixed-top-active .masthead {
		position: initial;
	}
}

Thanks,

#11

Brilliant! That did it, thanks!

#12

You’re welcome! :slight_smile: