CODEWITHSUNDEEP
htmlcssbootstrap-4
Mehdi Karimi
Mehdi Karimi

Reputation: 528

bootstrap custom navbar with lines

I'm trying to create this navbar in bootstrap 4:

But I really don't know how :/, could anybody give any advice?! Take a look at those lines at the left and right of the navbar and behind the image in center, those lines are what I want in this case, and I need the image be in the center and the other links right and left of it.
Any respond is welcome ♥.

Upvotes: 1

Views: 49

Answers (1)

Hooman Bahreini
Hooman Bahreini

Reputation: 15569

Just to give you an idea, you can use a strike class like below to draw a line on either side of the text... 

/* strike: text inside a line */
.strike {
    display: block;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
}

.strike > span {
    position: relative;
    display: inline-block;
}

.strike > span:before,
.strike > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    height: 1px;
    background: #d8d8d8;
}

.strike > span:before {
    right: 100%;
    margin-right: 8px;
}

.strike > span:after {
    left: 100%;
    margin-left: 8px;
}
<head>
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="row">
  <div class="col-4">
    <div class="strike">
        <span>some text1</span>
    </div>
  </div>
  <div class="col-4">
    <div class="strike">
        <span>some text2</span>
    </div>
  </div>
  <div class="col-4">
    <div class="strike">
        <span>some text3</span>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions