Jump to content

i have big blank between my navigation bar and my content on the mobile version only

Recommended Posts

Site URL: https://oriole-cowbell-8s27.squarespace.com/

Password to access the website : sophrologie 

Hi, 

I have an issue with my mobile version. The laptop version has no display problem. 

On my mobile, 

The first page (welcome page) appears ok. But then, on each page i have a blank space between the navigation bar and my content (or image with the yellow line). 

I would like to reduce those blanks but i don't know how to do it. 

I have added thanks to tutorials those things in order to have a fix navigation bar, and that reduce when i scroll down, and parameters for my mobile. 

In CSS: 

.Header.Header--top {
  position: fixed;
  top: 0px;
  z-index:1000;
  width:98.6%;
  box-shadow: 0px 2px 3px rgba(0,0,0,0.1)
}

.Intro {padding-top:100px;}
.Index {padding-top:150px;}
.Main {padding-top:100px;}
.Main.Main--page {padding-top:100px !important;}
.Main.Main--blog-item {padding-top:100px !important;}

@media only screen and (max-width: 480px) {
  .Main {padding-top:0px !important;}
  .Main.Main--page {padding-top:0px !important;}
  .Intro {padding-top:0px !important;}
  .Index {padding-top:0px !important;}
}

In advanced parameters (code injection), header :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
 $(document).on('scroll', function() {
   if ($(document).scrollTop() >= 1) {
     $('.Header-inner').css('padding-top', '1px').css('padding-bottom', '1px').css('transition', '0.3s');
   } else {
     $('.Header-inner').css('padding-top', '').css('padding-bottom', '').css('transition', '0.3s');
   }
 });
  $(document).on('scroll', function() {
   if ($(document).scrollTop() >= 1) {
     $('.Header-branding-logo').css('width', '105px').css('transition', '0.3s');
   } else {
     $('.Header-branding-logo').css('width', '').css('transition', '0.3s');
   }
 });
      $(document).on('scroll', function() {
   if ($(document).scrollTop() >= 1) {
     $('.Index').css('padding-top', '60px').css('transition', '0.3s');
   } else {
     $('.Index').css('padding-top', '').css('transition', '0.3s');
   }
 });
 </script>

If you can help me thanks a lot !!!!!

Link to comment
  • Replies 3
  • Views 391
  • Created
  • Last Reply

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.