Question 249265 in Html Question posted in
Some basic documentation can be found here.

Html – Making/fixing a specific subnav on my website

I have a particular problem that I have been fixing like an hour already.

Index.html

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <title>Farnost Kravare</title>
</head>
<body>

<nav>
    <div id="nav-logo">
        <img src="./img/farnostkravare-final.png" alt="Logo" height="130">
        <div class="citat">
            erhwtreghrtgewrtgerwgwwwwwwwwwwwwwwwwwwwwwwwwwgfdsgsdfgfsdgsdfg <br>
            dfgsjhrethwrethgwretgrgfdsgvsdffgwerrtgwqergwregrrthrtehrthgrtyg <br>
            hgfdhdherthyerthbdfgh<br>
            <div class="zvyraznit-autor">
                papež František
            </div>
        </div>
        <div id="nav-kontakt">
            <div>
                <i class="fa-solid fa-phone"></i> 890 989 098 <br>
                <i class="fa-solid fa-envelope"></i> [email protected]</p>
            </div>
        </div>
    </div>
    <div id="nav-navigace" class="relative">
        <ul id="nav">
            <li class="active-nav"><a href="">Úvod</a></li>
            <li><a href="">O Farnosti</a>
                <ul>
                    <li><a href="">Základní informace</a></li>
                    <li><a href="">Život farnosti</a></li>
                </ul>
            </li>
            <li><a href="">Bohoslužby</a></li>
            <li><a href="">Ohlášky</a></li>
            <li><a href="">Fotogalerie</a></li>
            <li><a href="">Historie</a></li>
            <li><a href="">Farní časopis</a></li>
            <li><a href="">Kontakty</a></li>
        </ul>
    </div>
</nav>

<section id="test">

</section>

<script>
    window.onscroll = function() {myFunction()};
    var navbar = document.getElementById("nav-navigace");
    var sticky = navbar.offsetTop;
    function myFunction() {
        if (window.pageYOffset >= sticky) {
            navbar.classList.add("sticky")
            navbar.classList.remove("relative")
        } else {
            navbar.classList.remove("sticky");
            navbar.classList.add("relative")
        }
    }
</script>

</body>
</html>

css

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-family: 'Roboto', sans-serif;
}

#nav-logo {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    text-align: center;
}


#nav-navigace {
    display: flex;
    background-color: #EBE76C;
    width: 100%;
    height: 5vh;
    justify-content: center;
    box-shadow: 0 4px 22px 0 rgba(0,0,0,0.75);
}

#nav-navigace ul {
    list-style: none;
    display: flex;
}


#nav-navigace ul li {
    height: 100%;
    padding: 15px 15px 0 15px;
}

#nav-navigace ul li ul {
    display: block;
    background-color: #EBE76C;
}

#nav-navigace ul li ul li {
    display: block;
    width: 100%;
}

#nav-navigace ul li a {
    text-decoration: none;
    display: inline-block;
    width: 100%;
    height: 100%;
}

#nav-navigace ul li:hover {
    background-color: #F0ED93;
}

#nav-kontakt {
    display: block;
    text-align: left;
}

#nav-kontakt div {
    margin-top: 5vh;
}


.citat {
    text-align: left;
    padding-top: 25px;
}

.relative {
    position: relative;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2;
}

#test {
    height: 200vh;
}

The subnav isn’t levelled on the left as the top li and subnav doesnt start end the end of the whole navigation bar.

I tried it to figure it out but failed. Also I was stuck on this problem so much, that I couldn’t proceed to actually do the functioning on hover.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    So thanks to you I actually made it work, but there came out a new problem. I need the li to be 100% height of the parent div for the hover effect changing background. Everything works, but the text or "a" element is in the top. I tried to vertically center it, but for a strange reason it doesn't work

    Here is the code:

    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-family: 'Roboto', sans-serif;
}

#nav-logo {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    text-align: center;
}


#nav-navigace {
    display: flex;
    background-color: #EBE76C;
    width: 100%;
    height: 50px;
    justify-content: center;
    box-shadow: 0 4px 22px 0 rgba(0,0,0,0.75);
}

#nav-navigace ul {
    list-style: none;
    display: flex;
    align-items: center;
}

#nav-navigace ul li {
    position: relative;
    width: 110px;
    height: 100%;
    text-align: center;
}

#nav-navigace ul li ul {
    display: none; /* Hide submenus by default */
    position: absolute; /* Position them absolutely relative to the parent */
    top: 100%; /* Position them below the parent item */
    left: 0; /* Align them with the parent item */
    background-color: #EBE76C;
    width:200px;
}

#nav-navigace ul li:hover ul {
    display: block; /* Show submenus on hover */
}

#nav-navigace ul li:hover {
    background: #F0ED93;
}

#nav-navigace ul li ul li {
    width: 100%;
    padding: 15px 0 15px 10px; /* Adjust padding as needed */
    height: 100%;
    position: relative;
    text-align: left;
}

#nav-navigace ul li a {
    text-decoration: none;
}

#nav-kontakt {
    display: block;
    text-align: left;
}

#nav-kontakt div {
    margin-top: 5vh;
}


.citat {
    text-align: left;
    padding-top: 25px;
}

.relative {
    position: relative;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2;
}

#test {
    height: 200vh;
}
    <!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <title>Farnost Kravare</title>
</head>
<body>

<nav>
    <div id="nav-logo">
        <img src="./img/farnostkravare-final.png" alt="Logo" height="130">
        <div class="citat">
            erhwtreghrtgewrtgerwgwwwwwwwwwwwwwwwwwwwwwwwwwgfdsgsdfgfsdgsdfg <br>
            dfgsjhrethwrethgwretgrgfdsgvsdffgwerrtgwqergwregrrthrtehrthgrtyg <br>
            hgfdhdherthyerthbdfgh<br>
            <div class="zvyraznit-autor">
                papež František
            </div>
        </div>
        <div id="nav-kontakt">
            <div>
                <i class="fa-solid fa-phone"></i> 890 989 098 <br>
                <i class="fa-solid fa-envelope"></i> [email protected]</p>
            </div>
        </div>
    </div>
    <div id="nav-navigace" class="relative">
        <ul id="nav">
            <li class="active-nav"><a href="">Úvod</a></li>
            <li><a href="">O Farnosti</a>
                <ul>
                    <li><a href="">Základní informace</a></li>
                    <li><a href="">Život farnosti</a></li>
                </ul>
            </li>
            <li><a href="">Bohoslužby</a></li>
            <li><a href="">Ohlášky</a></li>
            <li><a href="">Fotogalerie</a></li>
            <li><a href="">Historie</a></li>
            <li><a href="">Farní časopis</a></li>
            <li><a href="">Kontakty</a></li>
        </ul>
    </div>
</nav>

<section id="test">

</section>

<script>
    window.onscroll = function() {myFunction()};
    var navbar = document.getElementById("nav-navigace");
    var sticky = navbar.offsetTop;
    function myFunction() {
        if (window.pageYOffset >= sticky) {
            navbar.classList.add("sticky")
            navbar.classList.remove("relative")
        } else {
            navbar.classList.remove("sticky");
            navbar.classList.add("relative")
        }
    }
</script>

</body>
</html>


  2. 0 
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-family: 'Roboto', sans-serif;
}

#nav-logo {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    text-align: center;
}


#nav-navigace {
    display: flex;
    background-color: #EBE76C;
    width: 100%;
    height: 50px;
    justify-content: center;
    box-shadow: 0 4px 22px 0 rgba(0,0,0,0.75);
    po
}

#nav-navigace ul {
    list-style: none;
    display: flex;
      gap: 20px;
          align-items: center;
}

#nav-navigace ul li {
    position: relative;
}

#nav-navigace ul li ul {
    display: none; /* Hide submenus by default */
    position: absolute; /* Position them absolutely relative to the parent */
    top: 100%; /* Position them below the parent item */
    left: 0; /* Align them with the parent item */
    background-color: #EBE76C;
    width:200px;
}

#nav-navigace ul li:hover ul {
    display: block; /* Show submenus on hover */
}

#nav-navigace ul li ul li {
    width: 100%;
    padding: 15px 0; /* Adjust padding as needed */
      height: 100%;
    position: relative;
}


#nav-kontakt {
    display: block;
    text-align: left;
}

#nav-kontakt div {
    margin-top: 5vh;
}


.citat {
    text-align: left;
    padding-top: 25px;
}

.relative {
    position: relative;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2;
}

#test {
    height: 200vh;
}

/* Add this CSS to your existing styles */
    <!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <title>Farnost Kravare</title>
</head>
<body>

<nav>
    <div id="nav-logo">
        <img src="./img/farnostkravare-final.png" alt="Logo" height="130">
        <div class="citat">
            erhwtreghrtgewrtgerwgww <br>
            dfgsjhrethwrethgwrethgrtyg <br>
            hgfdhdherthyerthbdfgh<br>
            <div class="zvyraznit-autor">
                papež František
            </div>
        </div>
        <div id="nav-kontakt">
            <div>
                <i class="fa-solid fa-phone"></i> 890 989 098 <br>
                <i class="fa-solid fa-envelope"></i> [email protected]</p>
            </div>
        </div>
    </div>
    <div id="nav-navigace" class="relative">
        <ul id="nav">
            <li class="active-nav"><a href="">Úvod</a></li>
            <li><a href="">O Farnosti</a>
                <ul>
                    <li><a href="">Základní informace</a></li>
                    <li><a href="">Život farnosti</a></li>
                </ul>
            </li>
            <li><a href="">Bohoslužby</a></li>
            <li><a href="">Ohlášky</a></li>
            <li><a href="">Fotogalerie</a></li>
            <li><a href="">Historie</a></li>
            <li><a href="">Farní časopis</a></li>
            <li><a href="">Kontakty</a></li>
        </ul>
    </div>
</nav>

<section id="test">

</section>

<script>
    window.onscroll = function() {myFunction()};
    var navbar = document.getElementById("nav-navigace");
    var sticky = navbar.offsetTop;
    function myFunction() {
        if (window.pageYOffset >= sticky) {
            navbar.classList.add("sticky")
            navbar.classList.remove("relative")
        } else {
            navbar.classList.remove("sticky");
            navbar.classList.add("relative")
        }
    }
</script>

</body>
</html>

    I hope it’s work for your requirement.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search