Jump to content

2nd header following first header

Recommended Posts

Site URL: https://www.kelvinrentals.com/

Hello,
so I have a couple of questions I will try to list them here as organized a possible providing screenshots.

first of all this is the website :https://www.kelvinrentals.com/
and this is the password: kelvinrentals

I have a basic plan.

 

 

Question number 1:

I made a 2nd header and it works perfectly, however I need it to move to the top of the screen and stick to it while someone is scrolling as there is a gap between it and the top of the page when they do.

 

Here is the code I used


in code injection:

 


<!-- SECONDARY MENU HTML IN SITE/PAGE HEADER -->
<div id="secondary-menu">
  <ul>
    <a href="/grip"> <li> Grip </li> </a>
    <a href="/lighting"> <li> Lighting </li> </a>
    <a href="/sound"> <li> Sound </li> </a>
    <a href="/camera"> <li> Camera </li> </a>
    <a href="/production-supplies"> <li> Production supplies </li> </a>
  </ul>
</div>



in CSS

/*STYLES FOR SECONDARY HEADER IN CUSTOM CSS WINDOW*/
#secondary-menu ul {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
  text-align: center;

}
#secondary-menu li {
  display: inline-block;
  padding: 10px;
  text-transform: uppercase;
  font-size: 13px;
  transition: background 1s, color 1s;
    border-width: 0;
  opacity: 1;
  border: 1px solid #000000;
  border-radius: 5px;

  
}
#secondary-menu li:hover {
  background: #fff;
  color: #000;
  border-width: 0;
  opacity: 1;
  border: 1px solid #000000;
  border-radius: 5px;
}

#secondary-menu {
  background: #000;
}

#secondary-menu li {
  background: #000;
  color: #fff;
 

}

@media screen  and (max-width: 400px) {
  #secondary-menu li{
    padding: 10px;
     position: sticky;
    width: 50%;
    hight: 20%;
    z-index: 100;
    top: 0px;
  }
}

/*OPTIONAL CODE TO SET THE NAV BELOW THE HEADER*/
@media screen and (min-width: 930px) {
  #secondary-menu {
    position: sticky;
    position: -webkit-sticky;
    width: 100%;
    z-index: 999;
    top: 190px;
  }
}




1- before scrolling 
image.thumb.png.c710e0835123250ce3a70f4572b99e36.png

2- after scrolling

 

image.thumb.png.3f114b6626943fa6021c14d3b3cd20d6.png

 

......................

 


Question number 2:

 

Now my phone view looks like this, i would like to remove it and add the list to the hamburger icon without having the list on the first header on the desktop version. ( want the 1st header list only on phone)

image.thumb.png.fa698d27848ae1d98beb2b06071e67cf.png

 

 

Thank you.

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

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Try adding to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function(){
 var visibleTop = 30;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
      if ( scroll >= visibleTop ) {
           $('#secondary-menu').addClass('tuan');
        }
        else {
            $('#secondary-menu').removeClass('tuan');
        }
  });
function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
    }
});
</script>
<style>
  .tuan {
  	top: 0 !important;
  }
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.