Navigation Bar

philJon · May 27, 2020

Hello all,

I am currently developing a website and I am having some troubles with the navigation bar.

This the Navigation bar I'm using, I want to make the bar not exceed the screen so it can sit in the center of the screen with the text being centered without it being on the left side.

How can I do this?

Thanks

Makwana Prahlad · June 9, 2020

try this

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  position: relative;
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav-centered a {
  float: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.topnav-right {
  float: right;
}

/* Responsive navigation menu (for mobile devices) */
@media screen and (max-width: 600px) {
  .topnav a, .topnav-right {
    float: none;
    display: block;
  }
  
  .topnav-centered a {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
  }
}
</style>
</head>
<body>

<!-- Top navigation -->
<div class="topnav">

  <!-- Centered link -->
  <div class="topnav-centered">
    <a href="#home" class="active">Home</a>
  </div>
  
  <!-- Left-aligned links (default) -->
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  
  <!-- Right-aligned links -->
  <div class="topnav-right">
    <a href="#search">Search</a>
    <a href="#about">About</a>
  </div>
  
</div>

<div style="padding-left:16px">
  <h2>Responsive Top Navigation with Centered and Right-Aligned Links</h2>
  <p>Resize the browser window to see the responsive effect.</p>
</div>

</body>
</html>

For more information follow link

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_topnav_centered

Sign In

Navigation Bar

Recommended Posts

philJon

Link to comment

Share on other sites

Makwana Prahlad

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity