*RESOLVED* Jumpstart Theme - Adding Background to Sticky Nav Bar Before Scrolling

Shopify Partner
13 0 0

Hello, I'd like to add a solid white background behind the nav menu in Jumpstart theme. Currently, with my first section being a slideshow the main image stretches to the top of the page making the menu options difficult to see. I would like a white bar to appear behind the menu when the page loads so that the image shifts down. I've achieved this using page breaks except it doesn't work on all display sizes. Is there any way I can make my sticky nav bar display when the site loads without having to scroll? Thanks.

0 Likes
Explorer
83 0 23

Hi Oak,

I believe all you need to do is comment out the positioning in the CSS.

Find this ".site-header" and look for "position: absolute;" and comment it out like below:

.site-header {

  /* position: absolute; */
  z-index: 9999;
  width: 100%;
  height: 100px;

  .wrapper {
    height: 100%;
  }

  &.animate {
    transition: transform 250ms linear;
  }

  // Sticky variation
  &.sticky {
    position: fixed;
    left: 0;
    height: 70px;
    top: -70px;
    background: #fff;
    border-bottom: 1px solid $colorBorder;

    &.active {
      @include at-query($min, $large) {
        @include translate3d(0, 70px, 0);
      }
    }

  }

  &.sticky:not(.mobile) {
    .site-nav a,
    .site-nav li .site-nav__link.site-nav--active,
    .site-nav .site-nav__link {
      color: #000 !important;
      &:hover {
        color: $colorBtnPrimary !important;
      }
    }

    .site-header__logo a.site-header__logo-text {
      color: $colorPrimary !important;
      &:hover {
        color: $colorBtnPrimaryHover !important;
      }
    }

    svg {
      fill: #000;

          &:hover {
            fill: $colorBtnPrimary !important;
          }

    }
  }
  // Mobile variation
  &.mobile {
      top: 0;
      height: 70px;
      @include translate3d(0, 0, 0);
  }

}

 

EDIT: Doing this will push the rest of the content down

1 Like
Highlighted
Shopify Partner
13 0 0

That worked perfectly! Now I'm also having some troubles with the sticky nav logo padding. When the nav bar turns into the sticky on scroll, the logo appears with a white border. I would like to remove this space so that the logo fills out the header bar completely. Thank you so much Nick!

0 Likes
Explorer
83 0 23

That's interesting, I'm not seeing that on my development stores theme, can you provide a link to your store so I can check it out?

0 Likes
Shopify Partner
13 0 0

Of course, the link is http://muneezahjawad.com/ . It's not complete yet, I'm having troubles with a few other aspects of the design. Any feedback/help you can offer is greatly appreciated, I'm still learning the language.

EDIT: for some reason, my background color and alternate background colors are appearing as opposite each other. How might I be able to fix this?

0 Likes
Explorer
83 0 23

The size of the header is around 70px in height, so if you want to make the logo reach top and bottom change your css to the following (you can locate this on line 1500):

.sticky.site-header .site-header__logo {

  height: 70px;

  a {
    height: 69px;
  }
  a.site-header__logo-text {
    font-size: 0.8em;
    position: relative;
    top: 0;
  }

  img {
    max-height: 100%;
    width: auto;
    margin: 0;
  }

}

With 69px height:

With 60px height:

Your background colors seem to behave the way I'm seeing them in my dev store, are you sure they are being swapped (the sample below was taken from the headers)?

Your site:

.template-index .shopify-section:nth-child(odd) {
    background: #f5f5f5
}

My site:

.template-index .shopify-section:nth-child(odd) {
  background: #f9f9f9;
}

Something I noticed with your site is that your image feed in the footer isn't being separated from the "powered by juicer" section and it should have some kind of margin on the top of it to separate it from the added section above it

1 Like
Shopify Partner
13 0 0

Thank you, I've got the logo displaying correctly now and I fixed the colors by swapping them in the theme editor. How do I remove the padding around the image in the slideshow section? I would like it to stretch to the edge of the screen on all displays. Also, my logo appears to have shifted to the right in windows under 1200px wide. Thank you Nick!

0 Likes
Explorer
83 0 23

It looks like you've changed the max-width on the ".wrapper" class and its messing with the entire layout. You might want to change that back from 100% to 1200px. Line 142 contains the variable for that, otherwise search for "$siteWidth" and change that back to 1200px. For the image I assume you mean your hero image displayed just under the navigation. You can look for this class "lazyload__image-container" and change the max-width from 1200px to 100% (although I don't know what else is using this class so I'm unaware of the consequences on a site-wide scope). Doing this will make your image expand to the edges and also enlarge in height. Screenshot attached is showing the fixed navigation and the enlarged hero image

1 Like
Shopify Partner
13 0 0

Okay I think I've messed with it a bit too much now. Are you available for a quick hire? I could set you up with a staff account and transfer some $ to make the changes for me. I feel bad for taking up your time to explain this to me when I'm sure it would be much faster for you to do it by yourself.

EDIT: Here is a list of things I am looking to change. 

- I would like the logo position to respond to display size, always appearing in the top left corner of the header.
- navigation bar is now overlapping content on pages 
- social footer padding, make the bar thinner
- center align two divs side by side on the contact me page, responsive width
 

0 Likes
Explorer
83 0 23

Yes definitely, you can send the invite to nick@daileyproject.com and I'll take a look at what needs to be done =)

1 Like