CODEWITHSUNDEEP
htmlcss
Jury
Jury

Reputation: 181

Display link to each other in navagation

I tried several times, float: right or display: inline-block, but it didn't work on my side. Can anyone guys help me to achieve it? I want to display my navigation next to each other just like below.The words "Subscribe", "Contact Us", and "Resources" in a row.

I tried to run several codes just what I mention above. But seems it need your help to work it properly.

.menu {
  list-style-type: none;
  display: inline-block;
  padding: 0 11px;
  font-size: 1.5rem;
  margin-right: 6rem;
  font-family: "Montserrat", sans-serif;
}

ul li .link {
  position: relative;
  display: inline-block;
}

ul li a {
  text-decoration: none;
  text-transform: uppercase;
}

.head {
  position: relative;
  text-align: right;
  width: 100%;
  padding: 22px 48px 25px;
  border-bottom: 1px solid #f5f5f5;
 }

 div .logopix {
  height: 5rem;
  display: inline-block;
  font-size: 0;
  top: 1.1rem;
  left: 37px;
  position: absolute;


 }
<div class="head">
        <img class="logopix" src="./images/logo.png" alt="HUB Motivator Logo" >
        <ul class="menu">
          <li class="link"> <a href="#">About</a> </li>
          <li class="link"> <a href="#">Contact Us</a> </li>
        </ul>
      </div>

Upvotes: 0

Views: 55

Answers (3)

Prakash Upadhyay
Prakash Upadhyay

Reputation: 531

You can achieve the same requirement by writing very minimal semantic code and styling. Please check the code below.

Semantic HTML code

<header class="header">
  <img src="http://via.placeholder.com/150x60"/>
  <nav class="navbar">
    <a href="/about">About</a>
    <a href="/services">Services</a>
    <a href="/contact">Contact</a>
  </nav>
</header>

CSS Style

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar a {
  padding-left: 10px;
  font-size: 20px;
}

View Demo : jsfiddle

Upvotes: 0

pk_tan777
pk_tan777

Reputation: 361

add css in

.menu {
        display: flex;
    justify-content: flex-end;
    }

Upvotes: 2

August
August

Reputation: 2113

Following same technique as you used with inline-block, to display li on same line add:

ul li {
  display: inline-block;
}

Here is the code: Codepen

Upvotes: 0

Related Questions