Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Follow
Facebook Twitter Instagram Youtube
Contact

How to stop hover effect? (no JavaScript)

byMR
October 6, 2022

I have a horizontal menu with hover effect that shows a drop down menu. When I resize the window, I want this menu to become vertical but stop the hover effect. is there a way to do this?

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Roboto+Condensed:wght@300;400;700&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
}

header{
    box-shadow: 5px 0px 5px rgb(0 0 0 / 20%);
}

.headerWrapper{
    width: 90%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/* Horizontal Menu Styles */


.mainMenuUl{
    display: flex;
    column-gap: 5px;
    position: relative;
}

.mainMenuUl li a{
    display: block;
    font-size: 16px;
    font-weight: 600;
    line-height: 60px;
    padding: 0 20px;
    color: #5a5a5a;
}

.mainMenuUl li a[active]{
    background-color: #383838;
    color: #fff;
}

.mainMenuUl li a:hover{
    background-color: #383838;
    color: #fff;
}

.mainMenu li:hover > .subMenuUl{
    /* visibility: visible;
    opacity: 1; */
    display: block
}

.subMenuUl{
    position: absolute;
    box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
    /* visibility: hidden;
    opacity: 0; 
    თუ ამ ოფშენს ვრთავ მაშინ ჰამბურგერ მენიუს ჰოვერზე მიყვება და ვერ ვაჩერებ რომ +_ზე იმუშავოს*/
    display: none;
}

.mainMenu .subMenuUl li{
    position: relative;
}

.mainMenu .subMenuUl li a{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    padding: 0 0 0 7px;
    font-size: 14px;
    font-weight: 500;
    line-height: 40px;
    width: 230px;
    transition: all .3s ease 0s;
}

.subMenuUl li i{
    transform: rotate(-90deg);
}


.subMenuUl li:last-child{
    border: none;
}

.subMenuUl.sub{
    right: -230px;
    top: 20px;
    position: absolute;
}

.subMenuUl li:hover .subMenuUl.sub{
    right: -230px;
    top: 0;
    transition: all .3s;
}

/* Hamburger Menu Button Style */

.hamburger{
    display: none;
    width: 30px;
    height: 30px;
    border: 1px solid black;
    padding: 5px;
    position: relative;
}

.hamburger a{
    color: black
}

.hamburger i{
    font-size: 20px;
    cursor: pointer;
}

.hamburger input {
    display: none;
}

.fa-solid.fa-xmark{
    display: none;
    margin-left: 3px;
}

/* Hide Hamburger Icon */

.hamburger input:checked + label .fa-solid.fa-bars{
    display: none;
}

/* Show Close Icon */

.hamburger input:checked + label .fa-solid.fa-xmark{
    display: block;
}

/* Show Main Menu on Hamburger Click */

.hamburger:has(input:checked) + .mainMenu{
    display: block;
}

/* Main Menu Styles on Hamburger Click */



.hamburger:has(input:checked) + .mainMenu .mainMenuUl{
    display: block;
    position: absolute;
    right: 0;
    top: 80px;
    width: 70%;
    right: 2.5%;
}

.hamburger:has(input:checked) + .mainMenu .mainMenuUl li{
    background-color: black;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    display: block;
}



.hamburger:has(input:checked) + .mainMenu .mainMenuUl li a{
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 12px;
    font-weight: 600;
    line-height: 40px;
    padding: 0 0 0 20px;
    color: #fff5f5;
}


.hamburger:has(input:checked) + .mainMenu .mainMenuUl li a .fa-solid.fa-angle-down{
    font-size: 10px;
    margin-left: 5px;
}

.hamburger:has(input:checked) + .mainMenu .mainMenuUl li a[active]{
    background-color: black;
}

.hamburger:has(input:checked) + .mainMenu .mainMenuUl li a:hover{
    background: rgba(255,255,255,0.1);
}

.fa-solid.fa-plus{
    color: white;
}

.plusBtnBorder{
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    padding: 0 20px;
    background-color: rgb(255, 255, 255, 0.2);
    display: none;
}

.plusBtnBorder input{
    display: none;
}

.hamburger:has(input:checked) + .mainMenu .mainMenuUl li a .plusBtnBorder{
    display: block;
}

.plusBtnBorder:hover{
    background-color: black;
}


/* Hamburger SubMenu */

.hamburger:has(input:checked) + .mainMenu li:has(:hover) > .subMenuUl{
    position: relative;
}

.hamburger:has(input:checked) + .mainMenu li:has(:hover) > .subMenuUl li a{
    padding: 0 0 0 40px;
}















@media screen and (min-width: 1440px) {
    .headerWrapper{
        width: 75%;
    }
}

@media screen and (max-width: 1200px) {
    .headerWrapper{
        width: 80%;
    }

    .mainMenuUl li a{
        padding: 0 7px;
    }
}

@media screen and (max-width: 992px) {
    .headerWrapper{
        width: 90%;
        padding: 20px 0;
    }

    .hamburger{
        display: block;
    }

    .mainMenu{
        display: none;
    }

}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
        integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <header>
        <div class="headerWrapper">
            <div class="logo">
                <a href="#">
                    <img src="img/logo.webp" alt="logo">
                </a>
            </div>
            <div class="menu">
                <div class="hamburger">
                    <a href="#">
                        <input type="checkbox" id="check">
                        <label for="check">
                            <i class="fa-solid fa-bars"></i>
                            <i class="fa-solid fa-xmark"></i>
                        </label>
                    </a>
                </div>
                <nav class="mainMenu">
                    <ul class="mainMenuUl">
                        <li>
                            <a href="#" active>
                                <span>Home
                                    <i class="fa-solid fa-angle-down"></i>
                                </span>
                                <span class="plusBtnBorder">
                                    <input type="checkbox" id="vMenu">
                                    <label for="vMenu">
                                        <i class="fa-solid fa-plus"></i>
                                    </label>
                                </span>
                            </a>
                            <ul class="subMenuUl">
                                <li><a href="#">Home Version 1</a></li>
                                <li><a href="#">Home Version 2</a></li>
                                <li><a href="#">Home Version 3</a></li>
                                <li><a href="#">Home Version 4</a></li>
                            </ul>
                        </li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">
                                <span>
                                    Portfolio
                                    <i class="fa-solid fa-angle-down"></i>
                                </span>
                                <span class="plusBtnBorder">
                                    <i class="fa-solid fa-plus"></i>
                                </span>
                            </a>
                            <ul class="subMenuUl">
                                <li><a href="#">Boxed Style <i class="fa-solid fa-angle-down"></i></a>
                                    <ul class="subMenuUl sub">
                                        <li><a href="#">Gutter 4 Column</a></li>
                                        <li><a href="#">Gutter 3 Column</a></li>
                                        <li><a href="#">Gutter 2 Column</a></li>
                                        <li><a href="#">No Gutter 4 Column</a></li>
                                        <li><a href="#">No Gutter 3 Column</a></li>
                                        <li><a href="#">No Gutter 4 Column</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Wide Style <i class="fa-solid fa-angle-down"></i></a>
                                    <ul class="subMenuUl sub">
                                        <li><a href="#">Gutter 6 Column</a></li>
                                        <li><a href="#">Gutter 4 Column</a></li>
                                        <li><a href="#">Gutter 3 Column</a></li>
                                        <li><a href="#">Gutter 2 Column</a></li>
                                        <li><a href="#">No Gutter 6 Column</a></li>
                                        <li><a href="#">No Gutter 4 Column</a></li>
                                        <li><a href="#">No Gutter 3 Column</a></li>
                                        <li><a href="#">No Gutter 2 Column</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Card Style <i class="fa-solid fa-angle-down"></i></a>
                                    <ul class="subMenuUl sub">
                                        <li><a href="#">Card Box 4 Column</a></li>
                                        <li><a href="#">Card Box 3 Column</a></li>
                                        <li><a href="#">Card Box 2 Column</a></li>
                                        <li><a href="#">Card Full Width 6 Column</a></li>
                                        <li><a href="#">Card Full Width 4 Column</a></li>
                                        <li><a href="#">Card Full Width 3 Column</a></li>
                                        <li><a href="#">Card Full Width 2 Column</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Masonry Box <i class="fa-solid fa-angle-down"></i></a>
                                    <ul class="subMenuUl sub">
                                        <li><a href="#">Masonry Standard</a></li>
                                        <li><a href="#">Masonry Standard 2</a></li>
                                        <li><a href="#">Box 4 Column</a></li>
                                        <li><a href="#">Box 3 Column</a></li>
                                        <li><a href="#">Box 2 Column</a></li>
                                        <li><a href="#">Gutter Less 4 Column</a></li>
                                        <li><a href="#">Gutter Less 3 Column</a></li>
                                        <li><a href="#">Gutter Less 2 Column</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Masonry Wide <i class="fa-solid fa-angle-down"></i></a>
                                    <ul class="subMenuUl sub">
                                        <li><a href="#">Masonry Standard</a></li>
                                        <li><a href="#">Masonry Standard 2</a></li>
                                        <li><a href="#">Full Width 4 Column</a></li>
                                        <li><a href="#">Full Width 3 Column</a></li>
                                        <li><a href="#">Full Width 2 Column</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Portfolio Details <i class="fa-solid fa-angle-down"></i></a>
                                    <ul class="subMenuUl sub">
                                        <li><a href="#">Portfolio Details 1</a></li>
                                        <li><a href="#">Portfolio Details 2</a></li>
                                        <li><a href="#">Portfolio Details 3</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">
                                <span>
                                    Blog <i class="fa-solid fa-angle-down"></i>
                                </span>
                                <span class="plusBtnBorder">
                                    <i class="fa-solid fa-plus"></i>
                                </span>
                            </a>
                            <ul class="subMenuUl">
                                <li><a href="#">Blog Left Sidebar</a></li>
                                <li><a href="#">Blog Right Sidebar</a></li>
                                <li><a href="#">Full Width 3 Column</a></li>
                                <li><a href="#">Full Width 4 Column</a></li>
                                <li><a href="#">Blog Post Details</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Pricing</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
</body>
</html>`

>Solution :

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

You can add a media query around the hover effect like shown on the following example:

@media (min-width: 767px){
  .mainMenu li:hover > .subMenuUl{
      /* visibility: visible;
      opacity: 1; */
      display: block
  }
}

The hover effect will only be shown when the screen-width is bigger than 767px.

For some more research about media query read the following article: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

byMR
Published
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Read more

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading