Jump to content

Customized code in my header/navigation and now there's a huge gap in the navigation I can't seem to fix. Plz help!

Recommended Posts

Site URL: https://healthcontentcollective.com/

Hey y'all! I'm not a pro at coding, but needed to customize this website's heading to have the logo and navigation next to one another (not an option in the style settings for the Pacific theme). Only now there is a giant gap between 2 of the menu items. I am only using 1 navigation/menu.

Below is all of the CSS lines I have. I've been messing around with each of the lines to see if I can fix it by trial and error, but have had no luck. Any insight or possible solutions are greatly appreciated! Thanks!

 #header #logoWrapper,
 #header #siteTitleWrapper {
     position: relative;
     left: 15%;
   right: 5%;
   -webkit-transform: translate(-50%,0);
     -moz-transform: translate(-50%,0);
   -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
     transform: translate(-50%,0);
     text-align: right !important;
 }
 
#header #mainNavWrapper .index {
     margin: 0 0 0 0px !important;
     text-align: left !important;
 }

#header { position: fixed !important; }
     #header {background-color: #ffffff !important}
         header #logoWrapper {
       position: relative;
       left: 50%;
       padding-top: 0;
       padding-bottom: 0px;
     }
     header #mainNavWrapper {
       position: relative;
       padding-top: 0px;
       padding-bottom: 0px;
       text-align: center;
       vertical-align: middle;
       padding-left: 310px;
         padding-right: 20px
     }
     .folder {
       margin-right: 0 !important;
     }
     .collection {
       margin-left: 25 !important;
     }
@font-face {
  font-family: 'aquawax';
  src: url(https://static1.squarespace.com/static/5cb63e9e01232c410328f7f1/t/5ccc82b43786be0001b9282f/1556906676894/aquawax.woff2/aquawax-Regular.woff2) format('woff2'), url(https://static1.squarespace.com/static/5cb63e9e01232c410328f7f1/t/5ccc82ae4e17b63c9fb58d0f/1556906671146/aquawax.woffRegular.woff)
      format('woff');
}
h1{
  font-family: 'aquawax' !important
}
h2{
  font-family: 'aquawax' !important
}
h3{
  font-family: 'aquawax' !important
}
#intro {
    background-color: #5aa1ac;
}

Edited by katelyn.benton
Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

What is your desired end result.

There's a lot of issues with the header right now.

Does it need to be fixed? If so, does the theme have an option for that part?

Right now, with css making it fixed, its cutting off the top of the page.

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.