Jump to content

How do I get my menu to drop down instead of up on the Bryant theme?

Recommended Posts

  • Replies 3
  • Views 289
  • Created
  • Last Reply

Never seen this before on any template especially Brine. This looks like it could be a code issue. Style tweaks usually position the main and secondary bar, not folder contents. I don't know if this work but you could try it in custom css. If it doesn't, a good coder here, and we have many, will provide you with a solution I am sure. 

.Header-nav-folder {
    bottom: 36px;}

 .Header-nav-item {
    padding: 12px 0 !important;}

 

Link to comment

The menu seems to be heavily modified, do you know which pieces of code has been given to make the subnav position to fixed?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

I am taking over this project from another designer - there is a lot of custom CSS in the backend that I am trying to weed through. Below is everything I am seeing in the area for:

div
#home-page {
    padding-top:100px;
}

#mainNavigation{
  div:last-child{
    a{
     color:#a64b17
    }
  }
}
div.header-inner{
  padding-bottom:0px !important;
}
#headerNav{
  padding-top:70px;
  padding-bottom:0px !important;
}
#mainNavigation{
  div{
  padding-bottom:12px;
  }
  div.folder:hover{
    background-color:#a64b17;
  }
}
  @media screen and (min-width: 1000px){
    div.subnav{
  width:101%;
  position:fixed !important;
  left:0;
  top:0 !important;
  margin-top:0px;
  display:flex !important;
  flex-direction:row;
  justify-content:center;
  background-color:#a64b17 !important;
  padding-top:10px !important;
  padding-bottom:0px !important;
  padding-left:15px !important; 
  a{
    color:#fff !important;
    font-size:14px !important;
    letter-spacing:2px !important;
  }
   div{
    background-image: linear-gradient(#fff, #fff);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 3px;
    transition: background-size .3s !important;
    padding-bottom:5px !important;
}
      a:hover{
       color: #fff !important;
        transition:.3s !important;
      }
div:hover {
    background-size: 100% 3px;

Link to comment

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.