Navbar does not cover width of screen and mobile nav

[choltzman]

I was able to create the sticky navbar but It dosen't extend to the end of the width of the screen and the mobile/tablet device navigation looks awful. I can't figure out how to make it so that on a tablet device the navbar still extends the screen width even when showing the hamburger menu. It starts off with a transparent background then fades to black, but as you can see it misses a chunk of the screen width on the left. I tried width and padding and margins. This is the template I'm currently working on: https://app.hubspot.com/beta-design-manager/41615/templates/5934907375 Attached it what the nav looks like at each stage: I have the navbar set to change from transparent to black. In bith states the nav bar does not extend the width of the screen eventhough I have it set to do so. I'm not sure how to fix it

[Jsum]

@choltzman,

The link you provided is inside your portal so we can't access it. Try a design preview without display options, or make a page from the template in your staging area and get a sharable preview link there to share with us.

I can tell your navigation is fixed positioned. You can try setting 'left: 0;' on the outer most fixed container in the css. If it is already set to 0 left; then I would need to see the page to find the issue. make sure that width and.or max-widths are set to 100% on any wrapping elements.

[choltzman]

The link I provided was a preview without display. The page/template are not published https://app.hubspot.com/content/41615/edit/5934907902/content

[choltzman]

left:0; fixed it for the desktop view but it still looks off in Mobile and especially tablet view: 

[Jsum]

@choltzman you have some media queries in your css.

again, if you can share the page with us I could tell you exactly where and what to do, but if you use your inspector on chrome to find the exact width that the page snaps to mobile then you can search for that size in your css. It's probably 768px and there are probably quite a few media queries for this size.

Find the element giving you problems with your inspector tool and then play with the css on the left side of the elements tab of your console. In the case of mobile its either a width or a 0 right issue. you can click into the css to add new line in the inspector.

** The link provided is still gated by your portal. The page does not have to be published, a shareable preview link (left side page editor, eye icon) will share a page preview regardless of it's state.

[choltzman]

Try this one. http://cloud.baass.com/cconnect2018-v2?hs_preview=SpZcGQvQ-5934907902 I'm not exactly sure how to preview. so far I only found 1 set of media queries

Thanks for all your help and patience so far though. 

[tjoyce · Accepted solution]

In that same CSS code block, you should just be able to add 

right:0;

So you would end up with 

.navbar {
  background:transparent;
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  left:0;
  margin: 0px;
  padding:10px 70px 10px 70px;
  width: 100%; /* Full width */
  right: 0;
}

---

If this answer helped, please, mark as solved 😄

---

tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me on slack.

[choltzman]

Really simple solution but it seems to have worked. Thanks

[tjoyce]

We won't be able to see that design manager link you posted. Can you please link us to the preview URL, that should be all we need.

[choltzman]

https://preview.hs-sites.com/_hcms/preview/template/multi?is_buffered_template_layout=true&portalId=...