CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3navbar
Rodrigo
Rodrigo

Reputation: 63

Bootstrap navbar how can i underline with a line with spaces in both sides?

I'm trying to make a menu with bootstrap 3, I'm actually using code like this:

        <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>

But I want to achieve this:

enter image description here

how can i put the lines , I use "border-bottom" property but it expands all the column, I just want to have the separations of each menu, if I apply margins it just broke the menu.

Is there a way to achieve this? I'm thinking of using :before, :after,

But I don't know, anybody can help me!

Upvotes: 0

Views: 1148

Answers (3)

Mark Wilson
Mark Wilson

Reputation: 1354

Simple Just add

margin-left: 2px;
margin-right: 2px; // change the values based on your requirement

for the menu items (in your case it will be the div to which you are adding border-bottom).

USE NAVBAR

But looking at your code I would like to suggest you to build your menu the correct way using bootstraps navbar component.

Read more about it here:

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

Upvotes: 0

Aatish Sai
Aatish Sai

Reputation: 1687

Try playing with :hover pseudo class

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>

Upvotes: 0

Sasith
Sasith

Reputation: 790

You can use css ::after Selector for creating this type of thing. 

.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;
}

Here is a small fiddle to get started. But I strongly suggest Using <nav class="navbar" role="navigation"></nav> for a creating navigation.

Upvotes: 1

Related Questions