How do I add an underline to a Bootstrap navbar with spaces on both sides?

I'm currently working on creating a menu using bootstrap 3, and here is the code snippet I have implemented:

        <section id="menu">
        <div class="container-fluid">
            <div class="row">
                <div class="col-xs-12 col-sm-2">
                    <img class="img-responsive" src="logo.jpg" alt="logo">
                </div>
                <div class="col-xs-12 col-sm-2 nana">
                    <p>Some other menu</p>
                </div>
                <div class="col-xs-12 col-sm-2">
                    <p>Some other menu</p>
                </div>
                <div class="col-xs-12 col-sm-2">
                    <p>Some other menu</p>
                </div>
                <div class="col-xs-12 col-sm-2">
                    <p>Some other menu</p>
                </div>
                <div class="col-xs-12 col-sm-2">
                    <p>Some other menu</p>
                </div>
            </div>
        </div>
    </section>

My goal is to achieve a design like this:

https://i.sstatic.net/Hp1AS.png

I want to add lines between each menu item for separation. When I use the "border-bottom" property, it expands across all columns instead of just separating the menus. Applying margins breaks the layout. Is there a way to achieve this without causing issues?

I am considering using :before or :after, but I'm unsure how to proceed. Any suggestions or assistance would be greatly appreciated!

htmlcsstwitter-bootstrap-3navbar

Answer №1

To achieve this effect, consider utilizing the CSS ::after Selector. 

.col-sm-2::after {
    content: "";
    position: absolute;
    width: 90%;
    height: 3px;
    left: 0;
    right: 0;
    margin: auto;
    background: #aaa;
    transition: all .35s;
}
.col-sm-2:hover::after {
    background: #68c122;
}

You can refer to this fiddle for a demonstration. Additionally, it is recommended to use 

<nav class="navbar" role="navigation"></nav>
for creating navigation menus.

Answer №2

Experiment with the use of the :hover pseudo class for interactive effects

ul li {
  display: inline;
  text-align: center;
}

a {
  display: inline-block;
  width: 25%;
  padding: .75rem 0;
  margin: 0;
  text-decoration: none;
  color: #333;
}

.two:hover ~ hr {
  margin-left: 25%;
}

.three:hover ~ hr {
  margin-left: 50%;
}

.four:hover ~ hr {
  margin-left: 75%;
}

hr {
  height: .25rem;
  width: 25%;
  margin: 0;
  background: green;
  border: none;
  transition: .3s ease-in-out;
}
<div class="container">
  <ul>
    <li class="one"><a href="#">Menu Text</a></li><!--
 --><li class="two"><a href="#">Menu Text</a></li><!--
 --><li class="three"><a href="#">Menu Text</a></li><!--
 --><li class="four"><a href="#">Menu Text</a></li>
    <hr />
  </ul>
</div>

Answer №3

Quick Tip: Just add

margin-left: 2px;
margin-right: 2px; // adjust the values as needed

for the menu items (in your case, the div with the border-bottom).

CONSIDER USING NAVBAR

After reviewing your code, I recommend building your menu properly using Bootstrap's navbar component.

Learn more about it here:

https://getbootstrap.com/components/#navbar

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

guide on implementing a horizontal scrolling/swipe navbar with Cordova

Currently, I am working on creating a "category list" with multiple items for a Cordova app. The initial approach was to use a simple HTML list, but unfortunately, it seems that my list is causing some unexpected behavior. Desired swipe navbar layout: ht ...

jqueryhtmlcsscordova

Is there a way to prevent Bootstrap-4 drop-down from automatically applying certain styles?

When creating my new website, I decided to use Bootstrap-4. However, I ran into an issue with the drop-down feature. While the drop-down works perfectly fine in the header nav-bar, it seems to be adding some unwanted inline styles when used within the page ...

csshtmlbootstrap-4popper.js

Having Difficulty Positioning Tooltip Beside Input/Label Field

I have created a tooltip using HTML and CSS that appears when hovering over an image. However, I am encountering alignment issues when placing the image next to a textbox/input as it is not inline with the input box, likely due to some absolute positioning ...

jqueryhtmlcss

JavaScript - Sending Form Data with Local Time

I want to automatically submit a form at a specific time of day The form should be submitted every day at "15:30:00" Here is the JavaScript code I have written: <script type="text/javascript> function initClock() { var now = new Date(); var h ...

javascripthtmlformsdatetime

The placement of the breadcrumb trail is not in the right position

My website includes a menu and breadcrumbs. The menu consists of two submenus: Design Services, Design Portfolio, Design Fees, About Us, Contact Us, Design Resources, Design Vacancies, and Terms. Clicking on Design Services reveals Graphic Design, Logo Des ...

javascriptjqueryhtmlcssmenu

Extract particular details from my database

I need help creating a table to display all chat messages sent to the server. I have the table set up, but now I want to make it so that when I click on a user's name like 'demo', it will show me all the chat messages sent by that specific u ...

phphtmlmysql

spaces between sections with no padding or borders

I came across the following layout on the web and noticed that the divs do not align perfectly. The top of a lower div does not touch the bottom of the div above it when borders are removed, although they do when borders are added. There seems to be an i ...

htmlcss

Clicking on the image does not result in a larger image being displayed

Currently working on an assignment that requires a modal pop-out to display larger versions of photos when clicked, with the option to go back using the X button. Unfortunately, I'm facing issues with the X button not functioning properly and images n ...

javascriptjqueryhtmlcssmodal-dialog

Refreshing a specific area on a webpage through the use of Ajax technology

I need to update a specific part of my webpage when a user clicks on the 'clear' button. I currently have some code that I borrowed from another answer I found on this site: $('.clear').click(function () { $.ajax({ url: "", ...

jqueryhtmlajaxrefresh

"Choosing multiple options in Select2 causes it to constrict within a Bootstrap 4 inline

I am facing an issue where the field shrinks drastically when I type in it. Here's a code snippet that showcases this problem: $(function() { $("select").select2({ placeholder: "Select a word", width: "100%" }); }); <link rel ...

htmlcssjquery-select2bootstrap-4jquery-select2-4

PHP not compatible with Fancybox iframe

I'm facing a simple problem that I can't seem to figure out. I have a button that, when clicked, opens a fancybox with an iframe displaying a page from my website. This page includes a form for sending an email. Everything works fine except that ...

javascriptphpjqueryhtmlfancybox

Is there a way to dynamically update an image in my CSS without having to refresh the page?

Is it possible to update an image in CSS dynamically using the value of console.log without reloading the page? function reply_click(clicked_id){ $(function() { $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': ...

phpjqueryhtmlcssajax

Implementing dynamic display of div based on dropdown selection in typescript

A solution is needed to display or hide specific div elements based on a dropdown selection using Typescript. Sample HTML file: <select class="browser-default custom-select"> <option selected>single</option> <option value="1"> ...

htmlangulartypescript

Issue with image not fully encompassing div in Bootstrap 5

Currently working on a grid layout with images within the Bootstrap 5 framework. Here is the code snippet for the grid: #project_images img { height: 100%; width: 100%; object-fit: cover; } <section> <div class="container" id ...

htmlcsstwitter-bootstrapbootstrap-5

Having trouble with the PHP WHERE query - it's not functioning

Recently delving into PHP, I have a requirement to verify a user's email in the database and redirect them to the next page if it exists. However, my SQL query seems to be malfunctioning in PHP but works fine in the SQL database. The structure of my ...

phphtmlmysql

What is the best way to create a container filled with numerical figures?

If I have the number 445758, and I want each of these numbers to be displayed in their own box like this: https://i.sstatic.net/hBiA4.jpg Can you explain how to achieve this? ...

htmlcss

Navigational elements sporadically spaced apart

My goal is to design a navigation bar for my project, but I am facing an issue where random lines show up between the navigation elements. Here is an example of what I am experiencing: https://i.sstatic.net/UHI89.png If you would like to view the project, ...

htmlcss

Determining the identity of an HTML element using its surrounding values

I have a webpage with a table displaying various services and their corresponding download buttons. Here is an example of the content: nov. service 1 [ click to download pdf ] nov. service 5 [ click to download pdf ] nov. service 3 [ ...

pythonhtmlcssxmlselenium

Button triggering an onclick event

Can you design a feature where clicking on each button reveals specific images with text and heading? The initial image is hidden and when another button is clicked, the previous image disappears and new one appears in its place. We would like to achieve t ...

htmljquerycss

Using the radius to determine the center point of the circle

<span class="qs">Q{{i + 1}} <a href="#question-view"></a></span> <div class="tooltipp text-center bubble[ngStyle]="bubbleStyle(prof?.proficiencyBrightness, prof?.proficiencyRadius)"> </div> In the illustration below, ...

htmlcssbootstrap-4