0

I searched several of the suggested questions that came up when typing this, but I couldn't find an answer to my problem.

I'm using Uikit V2, and I have a div with the Sticky component. Here:

    <div class="uk-sticky" data-uk-sticky id="nvbr">
                <nav class="uk-navbar-center">
                    <a class="uk-button" href="#pg5"><h3>Contact</h3></a>
                    <a class="uk-button" href="#pg6"><h3>AboutUs</h3></a>
                    <a class="uk-button" href="#pg3"<h3>Services</h3></a>
                </nav>
            </div>

This works fine on the full screen, but when I resize to a small screen, the bar gets very wide. I open then in the inspector in Chrome and I get this line:

    <div class="uk-sticky-placeholder" style="height: 123px; margin:0px;">

Where would this be in my code and how can I fix it? I looked in Uikit and the Uikit.js.

(I should note, that when I am in Inspector, if I change that 123px to say 10px, it looks fine.)

Thanks all.

Caleb Smith
  • 27
  • 7
  • 3
    Set a breakpoint on attribute modification of the element. Then resize the screen, and it should trigger the breakpoint. Then you should be able to find the code that's making the style change in the stack trace. – Barmar Jan 23 '17 at 22:37
  • 1
    My guess is this *Uikit* isn't meant to handle dynamic screen resizing. It probably calculates dimensions only once, on page load. Try setting your screen size and reloading – Phil Jan 23 '17 at 22:39
  • This may be unrelated, but your markup has a syntax error. your third anchor tag is missing a `>` to the right of `"#pg3"` – Joseph Marikle Jan 23 '17 at 22:58
  • Thanks! @JosephMarikle – Caleb Smith Jan 24 '17 at 16:37

1 Answers1

0

I think it just counts height based on collapsed elements in the viewport.

https://github.com/uikit/uikit/blob/v2/develop/src/js/components/sticky.js#L286

The thing I would do if I were on your place, I would hide navbar elements on smaller devices with conditional classes and prepare of canvas menu (take a look inside docs).

Or try to take over control with your own js script.

cssBlaster21895
  • 3,670
  • 20
  • 33