Transition Effects in Bootstrap Navbar Hover Menu

I recently came across this codepen showcasing a CSS transition for achieving a sliding effect on hover, which can be found here. However, I am having trouble implementing it in my Bootstrap navigation bar. Could it be incompatible with the menu in Bootstrap?

 <!-- Static navbar -->
<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="index.php">Index</a></li>
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link2</a></li>
        <li><a href="#">Link3</a></li>

        <li class="dropdown">
          <a href="#.php" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">LinkTest<span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Linktest 2</a></li>
            <li><a href="#">Linktest 3</a></li>                
          </ul>

        <li><a href="kontakt.php">Kontakt</a></li>
          </ul>
        </li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>
csstwitter-bootstraphovercss-transitions

Answer №1

Some adjustments were made to the original codepen to ensure compatibility with dropdown menus. Additionally, the CSS was modified to use a transition transform instead of adjusting the left property.

Check out the demo!

HTML:

<nav class="navbar navbar-default navbar-static-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

            </button>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav list-hover-slide">
                <li><a href="index.php">Index</a>
                </li>
                <li><a href="#">Link1</a>
                </li>
                <li><a href="#">Link2</a>
                </li>
                <li><a href="#">Link3</a>
                </li>
                <li class="dropdown"> <a href="#.php" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">LinkTest<span class="caret"></span></a>

                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Linktest 2</a>
                        </li>
                        <li><a href="#">Linktest 3</a>
                        </li>
                    </ul>
                    <li><a href="kontakt.php">Contact</a>
                    </li>
            </ul>
            </li>
            </ul>
        </div>
        <!--/.nav-collapse -->
    </div>
</nav>

CSS:

.list-hover-slide>li {
    position: relative;
    overflow: hidden;
}
.list-hover-slide>li>a {
    z-index: 1;
    transition: .35s ease color;
}
.list-hover-slide>li>a:before, .list-hover-slide>li.dropdown.open>a:before {
    content:'';
    display: block;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    transform: translateX(-100%);
    border-right: solid 5px tomato;
    background: gray;
    transition: .35s ease transform;
}
.list-hover-slide>li>a:hover:before, .list-hover-slide>li.dropdown.open>a:before {
    transform: translateX(0);
}
.list-hover-slide>li.dropdown.open {
    overflow: initial;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The background isn't appearing, leaving all divs exposed

I have attempted to encapsulate everything with <div class="bg-wrapper">, but I am encountering issues with making it cover and display the background across all the elements within the wrapper. .bg-wrapper { background-image: url('img/b ...

htmlcssbootstrap-4

"Placing drop-down animations in just the right spot

I'm currently working on adjusting the dropdown behavior for thumbnails when hovering over them. I want the drop-down to appear beneath the 'Caption Title' instead of above the image, but so far my CSS adjustments haven't been successfu ...

javascriptjqueryhtmlcss

Scrolling and hovering now triggers the fixed button to toggle class seamlessly

Currently, I am attempting to modify the class of a button on my website. The initial state of the button is wide, but as the user scrolls, it should shrink in size. When hovering over the shrunken button, it should expand back to its original width. Alt ...

javascripthtmljquerycssbutton

Mastering CSS Positioning for Navbars

Displayed below is an interesting combination of elements - an image, textbox, and a css menu image. I have managed to perfect my CSS menu. However, I am facing a challenge. I need the textbox to be centered within the navigation bar, with the image posit ...

css

Unable to modify SVG color to a white hue

I am currently working on an Angular project where I am utilizing SVG to display some icons. These icons originally have a default grey color, but I want them to change to white when hovered over. Interestingly, while changing the color to red, green, or y ...

htmlcsssvgsass

Ways to stop cascading CSS attributes to child elements?

I am in the process of creating three tables. <table id="first"> <tr> <td> 1. CAPTION </td> </tr> <tr> <td> <table id="second"> <tr& ...

css

The translation feature in React does not seem to be functioning properly with SASS

After trying various display settings like flex and block without success, I realized that the transform property was not working as expected. Despite centering elements successfully using other methods, the transform doesn't seem to have any effect o ...

htmlcssreactjssass

Text in React Native exceeding one line is causing it to extend beyond the screen boundaries

I am having trouble displaying the last messages in my simple contact list as the text is getting cut off the screen. Below is the code I am using: (the readableTimestamp should be positioned behind the text.) View style={{ fontSize: 16, backgro ...

cssreactjsreact-native

Choose the option to eliminate the dropdown arrow in all web browsers

Although my code functions well in various browsers, I am experiencing an issue with IE. I have styled the select element, but I am unable to remove the default arrow in IE. <form> <label for="selectitem">Food Favorites</label> <selec ...

htmlcssformsselect

Guide to customizing WordPress header menu buttons with CSS, excluding a specific button

I need help with custom CSS for my WordPress site. I want to apply a hover effect to all menu buttons except for the "Contact" button, which already has its own styling. The CSS code adds a growing line beneath the hovered menu item and a static line unde ...

htmlcsswordpresscustom-wordpress-pages

Is the custom CSS being overridden by the bootstrap.css.map file?

I am currently working with Bootstrap 4 and I am attempting to adjust the padding for the navigation links within the navbar using my own custom CSS file: .nav-link { padding: 0.15rem; } However, the styling that is being applied comes from the followin ...

cssbootstrap-4

Manipulating classes with JQuery through click events

$('.toggle-button').on('click', function() { $('body').addClass('changeCursor'); }); $('.toggle-button.toggle-active').on('click', function() { $('body').removeClass('c ...

javascriptjqueryhtmlcss

Position the iframe at the center of the image for the best display

I'm looking for a way to make my web app appear as if it is on an Android or iPhone device. I've explored various solutions, but they all have their drawbacks. My workaround involves loading the web app in the middle of an iframe, which is then p ...

htmlcssiframe

The pop-up orientation is not being adjusted according to my CSS when it changes

I am currently working with Cordova 3.1.0 and Android 17. Here is the HTML code for my pop-up: <div id="rightNavPrpPopup1" data-role="popup" class="r-menu-dropdown"> <div class="r-menu-triangle"></div> <a class=" ...

javascriptandroidcsscordova

What could be causing the issues with the compatibility of <input type="text" and flex properties?

I'm having an issue where the search box expands in size when I apply display:flex in my CSS. Can someone explain why this happens and offer a solution to return the search box to its normal height? Additionally, I would like the search bar and the se ...

htmlcssflexbox

Creating a jQuery script to ensure the height of a dynamic div matches the height of the entire window

i found a helpful code snippet on this Stack Overflow post <script type='text/javascript'> $(function(){ $('#center').css({'height':(($(window).height())-162)+'px'}); $(window).resize(function(){ ...

jquerycsshtmlresizeheight

Center the navigation links within the navigation block

I am using the startbootstrap-small-business template and customizing it to fit my requirements. I have inserted a new logo which caused me to adjust the height of the navbar to approximately 120px. Now, my goal is to vertically align the links on the righ ...

htmlcsstwitter-bootstrap

React Material UI Slider component

I'm currently using the react material UI slider and I'm trying to change the default blue color of the pointer to pink. I attempted to modify the thumb and finger within the withStyles object, but unfortunately, it didn't have the desired e ...

javascriptcssreactjsmaterial-uislider

How can you make your InfoPath 2007 forms stand out with custom designs and branding?

Hello fellow developers, I'm interested in learning about the various methods, tools, and best practices for designing personalized InfoPath 2007 forms to be integrated into MOSS. I understand that this is a broad question, but any guidance would be ...

csssharepointformsinfopathbranding

Using Bootstrap Collapse with EJS Iteration

I am having trouble with this specific section of my ejs file where the collapse feature is not functioning correctly. Can someone please assist me? <% for(var i=0;i<data.length;i++){%> <div id="content"> <p><%=data[i].w ...

javascriptjquerycssbootstrap-4ejs