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)
  font-family: 'aquawax' !important
  font-family: 'aquawax' !important
  font-family: 'aquawax' !important
#intro {
    background-color: #5aa1ac;

Link to comment
  • Replies 1
  • Created
  • Last Reply

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


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.