my2sens Posted April 16, 2021 Share Posted April 16, 2021 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 More sharing options...
Funce Posted April 19, 2021 Share Posted April 19, 2021 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 More sharing options...
my2sens Posted April 20, 2021 Author Share Posted April 20, 2021 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 More sharing options...
dsonesuk Posted April 21, 2021 Share Posted April 21, 2021 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now