I'm trying to use the how to right aligned menu button code from w3schools but the search and about button aren't right aligning. I'm not sure why.
I have copied at the code right from the site and it's not working.
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #04AA6D;
color: white;
}
/* Right-aligned section inside the top navigation */
.topnav-right {
float: right;
}
<div class="topnav">
<a class="active" href="#home">Home</a>
News
Contact
<div class="topnav-right">
Search
About
</div>
</div>
Just remove the float: right will work
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #04AA6D;
color: white;
}
<div class="topnav">
<a class="active" href="#home">Home</a>
News
Contact
<div class="topnav-right">
Search
About
</div>
</div>
Related
What would I have to do to this code to get the navigation bar to show up in the top center of my website rather than the left?
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #04AA6D;
color: white;
}
I've tried inserting various strings into ".topnav" like "vertical-align: middle;" and "text-align: center;" and ".topnav ul {display: inline-block; list-style-type: none;}" but to no avail, what am I missing?
I'm trying to make a website, and I want a navbar to cover the entire screen, like this:
[1]: https://i.stack.imgur.com/X6zyc.png
I put the following code:
/* Add a black background color to the top navigation */
.topnav {
overflow: hidden;
padding: 5px 10px;
color: black;
}
/* Style the links inside the navigation bar */
.topnav a {
font-family: 'Roboto', sans-serif;
float: left;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
background-color: white;
}
/* Change the color of links on hover */
.topnav a:hover {
color: #ff726f;
}
/* Add a color to the active/current link */
.topnav a.active {
color: white;
}
<div class="topnav">
<a class="#" href="#">yes</a>
Home
Commands
Community Server
</div>
i've been searching for this a lot, but still couldn't find a clear answer. could someone please help me?
Your nav is spanning complete area which you can see in below snippet as the red background .
If you want nav links to span in both ends you can use display: flex; property with justify-content:space-between;
/* Add a black background color to the top navigation */
.topnav {
display: flex;
justify-content:space-between;
overflow: hidden;
padding: 5px 10px;
color: black;
background-color: red;
}
/* Style the links inside the navigation bar */
.topnav a {
font-family: 'Roboto', sans-serif;
float: left;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
background-color: white;
}
/* Change the color of links on hover */
.topnav a:hover {
color: #ff726f;
}
/* Add a color to the active/current link */
.topnav a.active {
color: white;
}
<div class="topnav">
<a class="#" href="#">yes</a>
Home
Commands
Community Server
</div>
This should be a fairly simple thing, however no matter where I add in color: black; the menu items do not show, you can only see them when I click and highlight over them. Please could someone point out which class needs to color tag to alter the text colour to black? I have tried placing it in .topnav with color: black; but did not change anything?
Also I can't get the active class to change when I'm on a different page, seems to only stay on the Home page?
.topnav {
background-color:white;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Add an active class to highlight the current page */
.active {
background-color: grey;
color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
/* Dropdown container - needed to position the dropdown content */
.dropdown {
float: left;
overflow: hidden;
}
/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
/* Style the dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Style the links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
display: block;
}
THE MENU CODE:
<!-- NAV BAR homepage-->
<nav>
<!-- https://www.w3schools.com/howto/howto_js_topnav_responsive.asp -->
<div class="topnav" id="myTopnav">
<i class="fas fa-home"> Home</i>
<i class="fas fa-info-circle"> About</i>
<i class="fas fa-envelope"> Contact</i>
<?php
// The below is a small 'if else' statement which depending on whether a user is logged in or not, the menu items will differ
// If logged in, then show the logout and the dashboard item
// If not logged in, then show the login and signup button
if (!isset($_SESSION['studentID'])) {
echo "<a name='login-submit' href='login.php'><i class='fas fa-sign-in-alt'> Login</i></a>";
echo "<a href='signup.php'><i class='fas fa-check-square'> Sign Up</i></a>";
} else if (isset($_SESSION['studentID'])) {
echo "<a href ='dashboard.php'><i class='fas fa-tachometer-alt'> Dashboard</i></a> ";
echo "<a name='logout-submit' href='scripts/logout-script.php'><i class='fas fa-sign-out-alt'> Logout</i></a>";
}
?>
☰
</div>
</nav>
I have right clicked into the console to check the styles tab:
This is what I see on my screen without hovering over an item in the menu:
Then this is what I see when I hover over an item (About):
Just add color: black to yours .topnav a components and get out the text from the fontawesome tag. For example replace that:
<i class="fas fa-envelope"> Contact</i>
to that:
<i class="fas fa-envelope"></i> Contact
You will get something like that:
.topnav {
background-color: white;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Add an active class to highlight the current page */
.active {
background-color: grey;
color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
/* Dropdown container - needed to position the dropdown content */
.dropdown {
float: left;
overflow: hidden;
}
/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
/* Style the dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Style the links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover,
.dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
display: block;
}
<!-- NAV BAR homepage-->
<nav>
<!-- https://www.w3schools.com/howto/howto_js_topnav_responsive.asp -->
<div class="topnav" id="myTopnav">
<i class="fas fa-home"></i> Home
<i class="fas fa-info-circle"></i> About
<i class="fas fa-envelope"></i> Contact
<a name='login-submit' href='login.php'><i class='fas fa-sign-in-alt'></i> Login</a>;
<a href='signup.php'><i class='fas fa-check-square'></i> Sign Up</a>;
<a href='dashboard.php'><i class='fas fa-tachometer-alt'></i> Dashboard</a>;
<a name='logout-submit' href='scripts/logout-script.php'><i class='fas fa-sign-out-alt'></i> Logout</a>;
☰
</div>
</nav>
For a first pitch, I would say that the color of your text is the same as the background of the navbar/body so you could try adding a background-color: color to your navbar.
.topnav a {
background-color: lightgray; //background-color
float: left;
display: block;
color: black; //change color of the text
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
If you decide to not add a background-color you can consider changing the color of the text to any other with color: [color].
a good way to assure if the color is not being overwritten you can put "!important" after the color like the following code below
.top-nav {
color:black !important;
}
in above code if you want to add background full navbar then added
.topnav{
background-color:hotpink;
overflow:hidden;
}
image look like below
if you want to added background only item then added below style code into
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
background: red;// background will be red all menu item
}
image like below
I am a beginner in HTML/CSS, So I am facing a problem while trying to integrate the user interface on the Navbar like this: .
I don't know how to style it, which tags should I use and how to put icon of user...
/* Add a background color to the top navigation */
.topnav {
background-color: #e61a26;
overflow: hidden;
position: relative;
top: 0;
width: 100%;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #f1f3f2;
color: #000;
}
/* Add a gray right border to all a items, except the last item (last-child) */
a {
border-right: 1px solid #fff;
}
a:last-child {
border-right: none;
}
<p>Welcome <strong>Username></strong></p>
<p>logout</p>
<div class="topnav">
<a class="active" href="/WWW/home.php">Home</a>
Shortcode
Work Order
</div>
I tried to solve this with flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
There are also some special cases like the border on the last, which is invisible. For this use the :last-child selector to remove it from the last item. And to style the link to look like a normal text, use text-decoration: none; For the user image you can use the img tag. After you set your custom width and height use and border-radius: 50%; to make it automaticlly a circle.
Just study the flexbox guide and you'll see it isn't that hard. Hope this helps.
body {
margin: 0;
}
.navbar {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
background-color: red;
}
.navbar__left,
.navbar__right {
display: flex;
flex-direction: row;
align-items: center;
}
.navbar__item {
padding: 20px;
color: white;
border-right: 1px solid white;
text-decoration: none;
}
.navbar__item:last-child {
border-right: none;
}
.navbar__item--active {
background-color: white;
color: black;
}
.navbar__user-image {
width: 45px;
height: 45px;
border-radius: 50%;
}
.navbar__user-image,
.navbar__user-logout {
margin-right: 15px;
}
<nav class="navbar">
<div class="navbar__left">
Home
About us
Contact
</div>
<div class="navbar__right">
<img class="navbar__user-image" src="https://www.telegraph.co.uk/content/dam/news/2016/08/23/106598324PandawaveNEWS_trans_NvBQzQNjv4Bqeo_i_u9APj8RuoebjoAHt0k9u7HhRJvuo-ZLenGRumA.jpg?imwidth=450" alt="user img">
<span class="navbar__user-logout">user logout</span>
</div>
</nav>
So after a few tries I succeeded it's really simple here is my code now :
/* Add a background color to the top navigation */
.topnav {
background-color: #e61a26;
overflow: hidden;
position: relative;
top: 0;
width: 100%;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #f1f3f2;
color: #000;
}
/* Add a gray right border to all a items, except the last item (last-child) */
a {
border-right: 1px solid #fff;
}
.workorder_link {
border-right: none;
}
a:last-child {
border-right: none;
}
<nav class="navbar">
<div class="topnav">
Home
Shortcode
Work Order
Logout
<a style="float: right; text-decoration: none;">Welcome <strong>Username</strong><img src="img/user.png" style="margin-bottom: 5px; margin-left: 5px; width: 20px; height: 20px;"></a>
</div>
</nav>
I currently have a navigation bar with typical links "Home, About, Resume, Contact".
I currently have code so when you hover over Resume (by default has an arrow pointing down), a dropdown appears and the direction of the arrow changes to point up using two span classes (code is below).
What I want to achieve is while hovering over the dropdown contents, the arrow is still pointing up (currently it reverts to pointing down while hovering over dropdown links).
Here is the current Code:
CSS/HTML:
/* Navbar links besides Resume */
.container1 {
overflow: hidden;
font-family: Cabin,Helvetica,Arial,sans-serif; /*changes font of name, about, contact*/
text-align: center;
}
/*Navbar links besides Resume */
.container1 a {
display: inline;
font-size: 30px;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
display: inline;
vertical-align: middle;
}
/* Affects Resume*/
.dropdown .dropbtn {
display: inline;
font-size: 30px;
font-family: Cabin,Helvetica,Arial,sans-serif;
border: none;
outline: none;
color: inherit;
padding: 14px 16px;
background-color: inherit;
}
/* color of Resume when hovered */
.container a:hover, .dropdown:hover .dropbtn {
background-color: inherit;
}
button .hover { display: none; }
button:hover .no_hover { display: none; }
button:hover .hover { display: inline; }
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
left: 52.3%;
background-color: white;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
<div class="container1">
<a id="home" href="#">Michael Geng</a>
<a id="about" href="#">About</a>
<div class="dropdown">
<a id = "resume" href="#"><button class="dropbtn">
<span class="no_hover">Resume ▼</span>
<span class="hover">Resume ▲</span>
</button></a>
<div class="dropdown-content">
<a id = "objective" href="#">Objective</a>
<a id = "education" href="#">Education</a>
<a id = "skills" href="#">Skills</a>
</div> <!-- dropdown-content -->
</div> <!-- dropdown -->
<a id="contact" href="#">Contact</a>
</ul>
</div> <!--container1 -->
My current thought this line of code where when you hover over the dropdown contents to change the display but I have not got it working:
.dropdown-content:hover ~ .no_hover{display: none; }
.dropdown-content:hover ~ .hover{display: inline; }
You need to change the CSS that triggers the appropriate arrow span to be displayed to be based on hovering over .dropdown. See updated snippet.
/* Navbar links besides Resume */
.container1 {
overflow: hidden;
font-family: Cabin,Helvetica,Arial,sans-serif; /*changes font of name, about, contact*/
text-align: center;
}
/*Navbar links besides Resume */
.container1 a {
display: inline;
font-size: 30px;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
display: inline;
vertical-align: middle;
}
/* Affects Resume*/
.dropdown .dropbtn {
display: inline;
font-size: 30px;
font-family: Cabin,Helvetica,Arial,sans-serif;
border: none;
outline: none;
color: inherit;
padding: 14px 16px;
background-color: inherit;
}
/* color of Resume when hovered */
.container a:hover, .dropdown:hover .dropbtn {
background-color: inherit;
}
button .hover { display: none; }
.dropdown:hover .no_hover { display: none; }
.dropdown:hover .hover { display: inline; }
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
left: 52.3%;
background-color: white;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
<div class="container1">
<a id="home" href="#">Michael Geng</a>
<a id="about" href="#">About</a>
<div class="dropdown">
<a id = "resume" href="#"><button class="dropbtn">
<span class="no_hover">Resume ▼</span>
<span class="hover">Resume ▲</span>
</button></a>
<div class="dropdown-content">
<a id = "objective" href="#">Objective</a>
<a id = "education" href="#">Education</a>
<a id = "skills" href="#">Skills</a>
</div> <!-- dropdown-content -->
</div> <!-- dropdown -->
<a id="contact" href="#">Contact</a>
</ul>
</div> <!--container1 -->