0

How are SVG elements positioned? Should I use JavaScript for alignment?

Well. I have ↓

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="keywords" content="html, css bootstrap, mega menu, navbar, large dropdown, menu CSS examples" />
    <meta name="description" content="Bootstrap 5 navbar megamenu examples with simple css demo code" />  

    <title>Demo - Bootstrap navbar megamenu dropdown. html code example </title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"crossorigin="anonymous"></script>

<style type="text/css">
.navbar .megamenu{ padding: 1rem; }
/* ============ desktop view ============ */
@media all and (min-width: 992px) {
    
    .navbar .has-megamenu{position:static!important;}
    .navbar .megamenu{left:0; right:0; width:100%; margin-top:0;  }
    
}   
/* ============ desktop view .end// ============ */


/* ============ mobile view ============ */
@media(max-width: 991px){
    .navbar.fixed-top .navbar-collapse, .navbar.sticky-top .navbar-collapse{
        overflow-y: auto;
        max-height: 90vh;
        margin-top:10px;
    }
}
/* ============ mobile view .end// ============ */

/* ============ desktop view ============ */
@media all and (min-width: 992px) {
    .navbar .nav-item .dropdown-menu{ display: none; }
    .navbar .nav-item:hover .nav-link{   }
    .navbar .nav-item:hover .dropdown-menu{ display: block; }
    .navbar .nav-item .dropdown-menu{ margin-top:0; }
}   
/* ============ desktop view .end// ============ */

@media (min-width: 992px) {
    .bordo {
        padding: 0;
    }
    li.nav-item.dropdown.has-megamenu {
    border-right: 1px solid #c88383;
}
    .navbar-expand-lg .navbar-collapse {
    display: block !important;
}
    .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }
    .nav-justified .nav-item, .nav-justified > .nav-link {
    flex-basis: auto;
}
    .megamenu .list-unstyled {
        font-size: 0.9rem;
        line-height: 1.8rem;
}

.dropdown-menu {
    border-left: 3px solid #90080a !important;
    border-right: 3px solid #90080a !important;
    border-bottom: 3px solid #90080a !important;
    border-radius: 0 0 .25rem .25rem;
}
}



#main_nav > ul > li > a:hover::before {
    background-color: transparent;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDM4LjQgMzAuNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzguNCAzMC40OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6I0ZGRkZGRjtzdHJva2U6IzdCMDIwNDtzdHJva2Utd2lkdGg6NDtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9Cjwvc3R5bGU+Cjxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iOC4yLDIgMi43LDguMiAxOS4yLDI3LjQgMzUuNyw4LjIgMzAuMiwyICIvPgo8L3N2Zz4K');
    background-position: center center;
    background-size: auto 100%;
    content: "";
    display: block;
    height: 20px;
    position: absolute;
    width: 20px;
    bottom: -8px !important;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 999999;
  }

</style>

</head>
<body>


    <div class="container">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary bordo">
<div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main_nav"  aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="main_nav">
        <ul class="navbar-nav justify-content-around nav-justified">
            <li class="nav-item dropdown has-megamenu">
                <a class="nav-link text-white px-0" href="#" data-bs-toggle="dropdown"> Trio Ring Sets  </a>
            </li>
            <li class="nav-item dropdown has-megamenu">
                <a class="nav-link text-white px-0" href="#" data-bs-toggle="dropdown"> Bridal Ring Sets </a>
            </li>
            <li class="nav-item dropdown has-megamenu">
                <a class="nav-link text-white px-0" href="#" data-bs-toggle="dropdown"> Wedding Band Sets </a>
            </li>
        </ul>
    </div> 
</div>
</nav>
</div>

</body>
</html>

My code

#main_nav > ul > li > a:hover::before {
    background-color: transparent;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDM4LjQgMzAuNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzguNCAzMC40OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6I0ZGRkZGRjtzdHJva2U6IzdCMDIwNDtzdHJva2Utd2lkdGg6NDtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9Cjwvc3R5bGU+Cjxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iOC4yLDIgMi43LDguMiAxOS4yLDI3LjQgMzUuNyw4LjIgMzAuMiwyICIvPgo8L3N2Zz4K');
    background-position: center center;
    background-size: auto 100%;
    content: "";
    display: block;
    height: 20px;
    position: absolute;
    width: 20px;
    bottom: -8px !important;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 999999;
  }

incorrectly positions SVG shape. It is now positioned in the center of the menu. It's an error.

I want the SVG element to be in the middle of the link <a> when I hover over li. Under each element <a>

See what effect I am asking about → https://www.youtube.com/watch?v=rvUKxYByjCw

Thommen
  • 75
  • 6

1 Answers1

0
#main_nav > ul > li > a{ position: relative;}

By adding this, the image will set its position related to this tag.

Erkan
  • 74
  • 6