Enhance your Bootstrap navigation menu with eye-catching hover effects

Hey everyone, I'm a beginner in web development and I'm attempting to incorporate a hover effect into my navigation menu. I want it to look like the first example in this link: https://codepen.io/Calloumi/pen/vndlH

I've tried to replicate the same concept on my Bootstrap HTML nav menu, but I've noticed that mine behaves slightly differently. Only the bottom border seems to move inward, and when hovering over the links, the menu item also shifts upward. I'm unsure of what needs to be added or changed to make it function the same way.

.navbar-light .navbar-nav .nav-link {
  text-transform: uppercase;
  text-align: center;
  font-size: 13px;
  text-decoration: none;
  background: white;
  color: black;
  font-family: "open-sans";
  transition: 0.3s ease;
  border-top: 4px solid #FFFFFF;
  border-bottom: 4px solid #FFFFFF;
  padding: 20px 0;
  margin: 0 20px;
}

.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link:hover {
  border-top: 4px solid #000000;
  border-bottom: 4px solid #000000;
  padding: 6px 0px;
  background: #11ADE8;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<nav class="navbar fixed-top navbar-expand-md navbar-light ">

  <div class="container-fluid">

    <a class="navbar-brand " href="#">
      <img src="images/logoblue.png" alt="">
    </a>
    <button class="navbar-toggler first-button darken-3" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
       <div class="animated-icon1"><span></span><span></span><span></span></div>
        </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Products</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Booking</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Prices</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Gallery</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact us</a>
        </li>
      </ul>
</nav>

Any assistance you can provide in achieving the same hover effect on my navigation menu would be greatly appreciated.

Answer №1

You seem to have a lot of unnecessary HTML code for such a simple navigation. The example in the provided codepen demonstrates the correct way to achieve this - a series of links (anchor tags) enclosed within a nav element.

The best solution here is to streamline your HTML structure.

nav { 
  margin-top: 40px; 
  padding: 24px; 
  text-align: center; 
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); 
  background: #3fa46a; 
} 

nav a { 
  transition: 0.3s ease; 
  background: #3fa46a; 
  color: white; 
  font-size: 20px; 
  text-decoration: none; 
  border-top: 4px solid transparent; 
  border-bottom: 4px solid transparent; 
  padding: 20px 0; 
  margin: 0 5px; 
  font-size: 17px; 
} 
nav a:hover { 
  border-top: 4px solid white; 
  border-bottom: 4px solid white; 
  padding: 6px 0; 
}
<nav> <a href="#">Home <span class="sr-only">(current)</span></a> <a href="#">Services</a> <a href="#">Products</a> <a href="#">Booking</a> <a href="#">Prices</a> <a href="#">Gallery</a> <a href="#">Contact us</a> </nav>

Answer №2

UPDATE: Ensure to eliminate the .navbar-light class from the :hover styling and incorporate display:inline for the navbar-nav in order for it to function correctly. The corrected code extracted from your codepen is provided below within the comments.

 .navbar-light .navbar-nav .nav-link {
    display: inline;
    text-transform: uppercase;
    font-size: 13px;
    text-decoration: none;
    color: black;
    font-family:"open-sans";
    transition: 0.3s ease;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    margin: 0 20px;
    padding: 20px 0;

}

 .navbar-nav .nav-link.active,
 .navbar-nav .nav-link:hover {
    border-top: 4px solid #000000;
    border-bottom: 4px solid #000000;
    background:#11ADE8;
    padding: 6px 0;
}

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

Issue with Jquery Hide function not functioning on the second page of Datatables

I am experiencing an issue with a jQuery function that hides the Datatables when a button is clicked on the table and then shows a form. The function works correctly on the first page, but on subsequent pages it fails to execute. Additionally, when I use ...

Solving issues with flexboxes in Safari 5.1.7 on Windows

I am currently utilizing flex boxes for managing the layouts of my website. However, it seems that the Safari version for Windows (5.1.7) is outdated and causing all flex boxes to be dysfunctional. On MacOS systems, the same version 12.x works correctly. ...

What could be causing site container not to respond to height:auto?

I have encountered an issue while developing a website using absolute height values. I am puzzled as to why the height:auto property is not working for me. Can anyone provide some insight on this? HTML Structure <div id="site-content"> <div id=" ...

Tips on assigning a value to a dynamically generated drop-down element

I used arrays of strings to populate drop-down menus. Is there a way to automatically set the value of each option to match the text content? el.value = opt; seems to be ineffective. var validCoursesKeys = ['opt 1','opt 2','opt ...

Utilizing HTML to emphasize a section of text

Hey there! I have a question related to an image with unicodes. The letter featured in the image was written using unicode characters పా. I'm trying to highlight the white portion of the image, but simply replacing it with ా isn&apos ...

Tips for restricting additional input when maximum length is reached in an Angular app

In my Angular 6 application, I am working on implementing a directive that prevents users from typing additional characters in an input field. However, I want to allow certain non-data input keys such as tab, delete, and backspace. Currently, I have an if ...

Arranging Data in an HTML Table Using TableSorter

I have been trying to incorporate sortable columns into my HTML table and decided to experiment with the jquery tablesorter. I have followed the syntax below, but for some reason, my table is not allowing me to sort. Can you help me understand why? &l ...

The dropdown options for the input type file in Vuejs PWA are not appearing

I have created a Vue.js progressive web app that allows users to easily upload images from their mobile phones. While the app typically functions well, there is an issue where upon downloading the app to the homescreen, the image upload feature sometimes b ...

Seeking guidance on implementing toggle buttons for navigation bar items on mobile screens, enabling them to toggle for a dropdown menu. The tools at my disposal are HTML, CSS

I want to make the navigation menu responsive by adding a toggle button for the dropdown menu on mobile screens. Here is the code snippet: .nav-link { display: inline-block; position: relative; color: black; } html,body{ height: 100%; width ...

Firefox failing to display fonts from Google Font API

The landing page our company outsourced does not display the Lato font in Firefox, resorting to a different option instead. We have received a stylesheet from fonts.googleapis.com that includes the following: @font-face { font-family: 'Lato'; ...

Limit the display of an element to a single occurrence by utilizing jQuery cookies

I have a unique piece of HTML and JS code that showcases an eye-catching modal box. This remarkable feature is present on every page of my website. However, to enhance the user experience, I would like to ensure that this div element is displayed only once ...

Is it possible to trigger a JavaScript function and an AJAX command with just one button click?

I'm looking to achieve a specific functionality using one button within a form. The requirements are as follows: 1) When the button is clicked, it should trigger a JavaScript function that performs animations such as fadeout and fadein. 2) Following ...

What is the best way to extract the body content from a Markdown file that includes Frontmatter

How can I retrieve the content of the body from my markdown file using front matter? Currently, it is displaying as undefined. What steps should I take to fix this issue? {latest.map(({ url, frontmatter }) => ( <PostCard url={url} content={frontmat ...

Floating action buttons in CSS

I'm trying to create a button that reveals additional options when hovered over. I've been looking for a method similar to what's shown in the image below, but haven't been successful. This needs to be implemented on a web page using HT ...

Font sizes for inline elements can be customized with gaps

Having trouble with setting font-size styles for inline elements, causing unexpected gaps to appear. Despite finding related questions on this issue, I have yet to discover a solution that fits my specific case. Here is the code in question: <!docty ...

Incorporate a Background Image, which is linked to a website URL, by utilizing an external CSS file within

I am struggling to incorporate an external CSS file (specifically a background image from a URL) into my HTML document. I have successfully applied internal CSS, so the issue is not with the website link. Despite reviewing similar posts addressing comparab ...

I encountered an issue where I am unable to subtract from jQuery's .outerHeight() within an if statement

I've been working on creating an ajax request that triggers when a div is scrolled to the bottom. I thought I had it figured out with this code, but I've run into an issue. Everything works fine without subtracting 100 from the elem.outerHeight() ...

Guide on displaying the name attribute of a button along with its price in a separate div when clicked

Upon clicking the Koala button, I want to display a message showing the id name of the button and the corresponding price for Koalas. Here is the HTML code snippet: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link h ...

What is the best way to maintain the position of components (such as a Card component) when one is expanded in a Material-UI and ReactJS project

Currently, I am working with an expandable Card component from Material-UI and using flex for aligning the components. However, when one card expands, it affects the positioning of the other components in the row: https://i.stack.imgur.com/vGxBU.png What ...

Tips for adjusting the color of the sidebar in an HTML email template

My attempt at modifying the background color of my HTML email template has been focused on changing the sidebar's white color, rather than altering the background of the email body itself. This is the CSS code I have: @import url('https://fonts. ...