Jump to content

Nav Bar Issue/Question


my2sens
 Share

Recommended Posts

Hey Everyone!

First off, thank you for this site - this is what I needed for my new job!

I have a question where I need help.  I am using HTML to build a Sharepoint page for my team.

On the page I need 2 navbars, 1 on top of the other.  The top nav bar will have 3 "buttons" and the bottom 4 "buttons".  I have the following code, but here is the issue.  I would like the top bar to  fill the page, ie center above the 4, but it keeps sticking to the left!

Thoughts?  Ideas?  Thanks!

PS - Ignore the **** that's for me visually to know where a new item starts.

 

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: Arial, Helvetica, sans-serif;}

.navbar {
  width: 100%;
  background-color: #FFFFFF;
  overflow: auto;
  align: center;
}

.navbar a {
  float: left;
  padding: 12px;
  color: black;
  text-decoration: none;
  font-size: 17px;
  width: 33%; /* Three links of equal widths */
  text-align: center;
}

.navbar a:hover {
  background-color: #A1FFFA;
}

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

@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
    width: 100%;
    text-align: left;
  }
}
</style>
<body>

<div class="navbar">
  <a href="#">Home</a> 
  <a href="#">Search</a> 
  <a href="#">Contact</a> 

</div>

******************

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: Arial, Helvetica, sans-serif;}

.navbar {
  width: 100%;
  background-color: #FFFFFF;
  overflow: auto;
}

.navbar a {
  float: left;
  padding: 12px;
  color: black;
  text-decoration: none;
  font-size: 17px;
  width: 25%; /* Three links of equal widths */
  text-align: center;
}

.navbar a:hover {
  background-color: #A1FFFA;
}

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

@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
    width: 100%;
    text-align: left;
  }
}
</style>
<body>

<div class="navbar">
  <a href="#">Home</a> 
  <a href="#">Search</a> 
  <a href="#">Contact</a>
  <a href="#">Contact</a>

</div>

******************

Link to comment
Share on other sites

Hmm.. This is interesting because on its own, the code for your top bar works fine. But when you put that code one after the other, the second set of styles override the first.

Have you tried adding separate classes for each navigation and styling them?

Link to comment
Share on other sites

18 hours ago, Funce said:

Hmm.. This is interesting because on its own, the code for your top bar works fine. But when you put that code one after the other, the second set of styles override the first.

Have you tried adding separate classes for each navigation and styling them?

Let me try that, thank you.

Link to comment
Share on other sites

In CSS the last identical selector always overrides the previous selectors styling if properties values are changed.

Just add additional class of 'columns-style1' so class ref will be class="navbar columns-style1"

Then apply different styling to that class ref.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...