0

I am having a bit of an issue with my navigation bar. Basically the problem I am having is that I am using a Bootstrap affix which I can only set one data-offset, here is an example of the HTML:

<nav class="navbar navbar-default affix-top nav-links" data-spy="affix" data-offset-top="120" role="navigation">

Just so you know the affix basically fixes the navbar to the top of the viewport when it scrolls past the navbar.

The issue is that when the viewport is scaled down the logo scales down and the data-offset needs changing because the distance between the top of the page and the navbar is now different because of the logo size change.

Is there a way to change the data-offset when the viewport is scaled? It would be great if I could create a media query but the data-offset is input in the HTML.

Thanks :)

Nick M
  • 85
  • 1
  • 3
  • 10

1 Answers1

0

There is a working solution on SO here Bootstrap 3.0 scrollspy responsive offsets

When I had to account for offset in a design I developed, I did the offset in CSS rather than using the data model. Then I was able to target with media queries. As seen in the SO referenced here, the data from jQuery only gets loaded in once.

Community
  • 1
  • 1
Aibrean
  • 6,297
  • 1
  • 22
  • 38