CODEWITHSUNDEEP
htmlcss
user9623442
user9623442

Reputation:

How can I make a two line nav bar? using html and css only

sample photo is like this :

enter image description here

my code as of now is this:

.topnav{
	background-color: #0624c5;
	overflow: hidden;
	padding: 30px;
}

.topnav a{
	color: #ffffff;
	text-decoration: none;
	color: #ffffff;
	padding: 15px 16px;
	font-size: 15px;
	font-family: Raleway Medium;
	border-right: 1px solid #0120b8;
}

.topnav a:hover {
  color: #ff0004;
  text-decoration: underline;
}

.topnav .icon {
  display: none;
}

   
<body>
	<div>
		<div class="topnav" id="myTopnav">
			<a href="#" style="color: #ff0004;">Home</a>
			<a href="#">About Us</a>
			<a href="#"><span>Companionship & Personal Care Services</span></a>
			<a href="#">Alzheimer’s & Parkinson’s Services</a>
			<a href="#">Our Caregivers</a>
			
		</div>
	</div>
</body>

I hope someone can answer me . It will be a huge help in my activity.. thanks in advance

Upvotes: 1

Views: 442

Answers (2)

Aryan Twanju
Aryan Twanju

Reputation: 2516

display: table and display: table-cell properties is the solution for your issue. You can make change to these 2 css selector to achieve your desired result.

.topnav{
    background-color: #0624c5;
    overflow: hidden;
    padding: 30px;
  display: table;
}

.topnav a{
    color: #ffffff;
    text-decoration: none;
    color: #ffffff;
    padding: 15px 16px;
    font-size: 15px;
    font-family: Raleway Medium;
    border-right: 1px solid #0120b8;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

Upvotes: 0

Super User
Super User

Reputation: 9642

For this just use display: inline-block with max-width. Check updated snippet below

.topnav{
  background-color: #0624c5;
  overflow: hidden;
  padding: 30px;
}

.topnav a {
  color: #ffffff;
  text-decoration: none;
  color: #ffffff;
  padding: 15px 10px;
  font-size: 15px;
  font-family: Raleway Medium;
  border-right: 1px solid #0120b8;
  text-align: center;
  max-width: 150px;
  display: inline-block;
  vertical-align: middle;
}

.topnav a:hover {
  color: #ff0004;
  text-decoration: underline;
}

.topnav .icon {
  display: none;
}
<div>
  <div class="topnav" id="myTopnav">
    <a href="#" style="color: #ff0004;">Home</a>
    <a href="#">About Us</a>
    <a href="#"><span>Companionship & Personal Care Services</span></a>
    <a href="#">Alzheimer’s & Parkinson’s Services</a>
    <a href="#">Our Caregivers</a>
  </div>
</div>

Upvotes: 2

Related Questions