Logo on mobile

[fortknoxusa]

hello,

1. how can i make the logo on mobile smaller and more to the left?
2. On mobile the nav bar moves when i first scroll down and shows space behind it. how can i make it so the nav bar is static?
3. How can i make the headline on mobile appear more words on one line so it reads:
   Laser Tag
   Like Never Before
4. how to move the headline on mobile closer to the image
5. how to get rid of extra space under the headline on mobile.

I attached a photo for help

[ruenel]

Hello There,

Thanks for writing in!

1.) To make the logo on mobile smaller and more to the left, please make use of this code:

@media(max-width: 767px){
  .x-brand img {
    width: 85px;
  }

  .x-navbar .x-container.max.width {
    max-width: 99%;
    width: 100%;
  }
}

2.) On mobile the nav bar moves when i first scroll down and shows space behind it. how can i make it so the nav bar is static?

• This issue is because of your custom css code that make the navbar fixed. To resolve this, you will have to update your code from this:

.x-navbar {
    background-color: #000000;
    position: fixed;
    width: 100%;
    border: none;
    box-shadow: none;
}

into this:

.x-navbar {
    background-color: #000000;
    position: relative;
    width: 100%;
    border: none;
    box-shadow: none;
}

@media(min-width: 768px) {
  .x-navbar {
    position: fixed;
  }
}

3.) The font size of the headline is big enough in smaller screens which is why it displays more lines. You will have to apply responsive text if you want to display like what you wanted. You can apply the responsive text and manage it in Settings > Responsive Text

4.) You have added a negative top margin and some padding in the headline. You will need to insert an inline css in your headline element setting:

@media(max-width: 767px){
  $el {
    padding-top: 1.3em;
  }
}

Screenshot

5.) To remove the space below the header, please go back to #4 and update the code into this:

@media(max-width: 767px){
  $el {
    padding-top: 1.3em;
    padding-bottom: 0;
  }
}

We would loved to know if this has work for you. Thank you.

[fortknoxusa]

I still want the menu on mobile to scroll with the page. Now it does not. basically my problem before was that when u first started scrolling there was white space behind the menu showing.

[fortknoxusa]

also where do i find the setting for responsive text

[rad]

Hi @fortknoxusa,

That’s a static navbar, it never moves along with scroll. You can then set it back to

.x-navbar {
    background-color: #000000;
    position: fixed;
    width: 100%;
    border: none;
    box-shadow: none;
}

Though, I can’t see the spacing at this moment.

As for the responsive text, you can edit your page in the builder then click the Cog icon (gear icon) and go to the preference section where you could add the responsive text. It’s in the screenshot provided by @RueNel.

Thanks!