Help with my Navbar Display

Tell us what’s happening:
Describe your issue in detail here.
I am having issues finishing my Web Develoment Project on a Product landing page, I have completed all other user stories except the one that says " User Story #13: The navbar should always be at the top of the viewport" and I need some briefing on how exactly how to do that?

So this is what my header in html looks like :point_down:

<header id="header">
                <div id="sub-head">
                    <img src="#" company-logo" id="header-img">
                    <span></span>
                    <nav id="nav-bar">
                        <ul id="ul">
                            <li class="li"><a href="#home-div" class="nav-link">Home</a></li>
                            <li class="li"><a href="#contact-div" class="nav-link">Contact Us</a></li>
                            <li class="li"><a href="#guide-div" class="nav-link">Guide</a></li>
                        </ul>
                    </nav>
                </div>
            </header>

Please I need support :pleading_face:
Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.101 Safari/537.36 Edg/91.0.864.48

Challenge: Build a Product Landing Page

Link to the challenge:

Hi and welcome, you have a syntax issue with your <img> (what’s “company-logo” with only one quote?), and I’m not sure what that empty <span> is doing there, but anyway, the user story that fails is related to CSS, not HTML.

To keep an element always at the top of the viewport, it needs a position of either fixed or sticky. If this doesn’t fix the issue, we’d have to see the rest of your code, ideally a link to your codepen.

And then to make it on top-right of the webpage, you have to use the top property and right property, right? Like this?

#navbar-btn {
       position: fixed;
       top: 0;
       right: 0; 

}
1 Like

Yeah I think you have to define at least one of the top, bottom, left or right properties for it to work.

1 Like

Ok I have actually set the position property to fixed although I will try setting the position to sticky and fixing values for the top and left positioning properties and see if it works :slightly_smiling_face: Thanks for the tip

Here’s the link to the codepen - codepen-link

And (what’s “company-logo” with only one quote?) this was a typo it was meant to be an alternative text for the img element i.e<img alt="company-logo"> I will fix it as well Thanks again.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.