I am following a guide from w3schools to build a responsive top navigation bar for my site: How TO - Responsive Top Navigation
However, I would like the navigation items to be centered on the page, not aligned to the left or right. w3schools even has a second tutorial on a center navigation element link, but as soon as I try to use this code for several navigation elements, they either are all within each other or stack on top of each other!
Even more to my dismay, there has been a question about this exact problem before (here), but it seems the code of the example has been changed a lot in the meanwhile so that the answer is no longer applicable. :(
To center the top navigation in the link you've provided, you would add the following to .topnav:
.topnav {
…
display: flex;
justify-content: center;
}
To address the mobile menu (and not center it), add the following to your #media query:
#media screen and (max-width: 600px) {
…
.topnav { display: block; }
}
Before
After
One way is to wrap the links inside a div (say, a div with class nav-links), and then applying to the div:
.nav-links {
width: fit-content; /* 'margin: auto' alone does not work if the div takes full width */
margin: auto;
}
Below is a demo based on the tutorial you linked:
.nav-links {
width: fit-content;
margin:auto;
}
/*////////////// W3Schools CSS code //////////////*/
/* 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;
display: block;
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 an active class to highlight the current page */
.topnav a.active {
background-color: #4CAF50;
color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
<!-- Load an icon library to show a hamburger menu (bars) on small screens -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav" id="myTopnav">
<div class="nav-links">
Home
News
Contact
About
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</div>
Related
I have been puzzled for a while. I am making a personal website with multiple navigation buttons including one dropdown menu. The dropdown menu should be triggered when the cursor hovers over the about button. I used W3School's code as part of the foundation.
I have tried to create one myself however, when I hover over any button the menu triggers.
I played around with using and using but neither was successful. I tried also creating a second but then I ran into another issue where I could not get the buttons (Gallery and Contact) to sit next to the other button (About). Below is the HTML and further is the CSS.
<nav class="dropdown">
<button class="about" href="about.html">About </button>
<button class="gallery" href="gallery.html">Gallery </a>
<button class="contact" href="contact.html">Contact </a>
<div class="dropdown-content">
Achievements
Education
Hobbies
Career
</div>
.dropdown{
font-size: 22px;
font-family: "Arvo", serif;
font-weight: bold;
text-align: right;
position:relative;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: relative;
background-color: #f1f1f1;
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 {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}.dropdown-content a:hover {
background-color: #ddd;
}
.about:hover .dropdown-content {
display: block;
}
.about:hover {background-color: transparent;
}
You need to update the CSS. The dropdown-content is not a child of .about so doing .about:hover .dropdown-content wont work. You need to use General Sibling Selector
Update it to .about:hover ~ .dropdown-content
EDIT
You also have an issue with your HTML you are opening button tags but closing a tags update them and it should work
I am doing a school project in which I'm not allowed to use Javascript or Bootstrap, and I cannot find a way to make a dropdown menu when the site is opened in smaller screens. Most guides and videos show using Bootstrap or JS and it has gotten me all confused, is it possible to do with just HTML and CSS?. Can anyone give me some quick tips or alternatives? Thank you beforehand!
Answer below using HTML and CSS only.
If my answer works, please check it as final answer and upvote it so other people with same problem will get help too. Cheers
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<style>
/* Style The Dropdown Button */
.dropbtn {
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px;
text-decoration: none;
display: block;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
</style>
CSS has been my greatest weakness and even after a few tutorials here and there, I am still quite a novice in terms of positioning things.
I would like to move a drop-down hover button next to another button (split button dropdown). However even after using position:auto and left:auto, it is still showing up on the other side, where I do not want it to be in. Looking for a HTML/CSS guru that can show this novice the way :)
Here is a picture of what I'm talking about:
Element I want moved
The way I would like the Split Button to look like (note: just the positioning of one another, not the colour or size etc..).
Split Button Look
Here is my HTML Code:
<!-- Font Awesome Icon Library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- The "All Referral" Dropdown hover button -->
<button class="btn">All Referral</button>
<div class="dropdown">
<!-- The Dropdown button with the arrow and the links -->
<button class="btn" style="border-left:1px solid orange">
<i class="fa fa-caret-down"></i>
</button>
<!-- The links for all referral in the dropdown button -->
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
And here is my CSS:
/* Dropdown Button */
.btn {
background-color: orange;
color: white;
padding: 2px 20px 3px 20px;
float: right;
font-size: 14px;
font-weight:bold;
text-decoration:none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
padding: 2px 20px 3px 20px;
float: right;
font-size: 14px;
font-weight:bold;
text-decoration:none;
/* position: absolute; */
/* display: inline-block; */
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: silver;
min-width: 160px;
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: orange}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.btn:hover, .dropdown:hover .btn {
background-color: silver;
}
Also are there any youtube tutorials or absolutely handy pdf/books whatever for "semi-advanced" css tips and tricks? I kinda have an idea with the basics but it's just so difficult for me to move things around the page and where it should go etc...
Again, many thanks for any help that comes my way!
I suggest using flexbox for positioning. Take a look at the link below.
https://codepen.io/jcbryant/pen/dyObVbL
What I did: added a div container wrapped around the buttons. Gave each button its own unique id for better control. Removed the float properties and replaced them with display: flex. Removed the padding property on the drop down button and added margin-left: 0px;.
Do a display: flex; on the container of that All refferals button and the dropdown then do margin-left: 0; in the .dropdown btn
The HTML Code:
<!-- Font Awesome Icon Library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- The "All Referral" Dropdown hover button -->
<div id="buttonContainer"> <!--BUTTON CONTAINER-->
<button id="button">All Referral</button> <!--CHANGED TO ID -->
<div class="dropdown">
<!-- The Dropdown button with the arrow and the links -->
<button id="dropButton" style="border-left:1px solid orange"> <!--CHANGED TO ID -->
<i class="fa fa-caret-down"></i>
</button>
<!-- The links for all referral in the dropdown button -->
<div class="dropdown-content">
Link 1
Link 1
Link 1
</div>
</div>
</div>
<span style="float:left;">
<a class="btnWhiteblueMin marleft" href="#">Button 1</a>
<a class="btnWhiteblueMin marleft" href="#">Button 2</a>
<a class="btnWhitepurpleMin" href="#">Button 3</a>
</span>
<br class="clr" />
</div>
The CSS Code:
/* Participant Profile Header Drop-down Button -CoachPanda Edit */
/* Dropdown Button */
#buttonContainer {
display: flex;
float: right; /*Q change*/
}
#button {
background-color: orange;
color: white;
padding: 2px 20px 3px 20px;
display: flex;
font-size: 14px;
font-weight:bold;
text-decoration:none;
}
#dropButton {
background-color: orange;
display: flex;
margin-left: 0px;
font-size: 14px;
padding: 5px;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
font-weight:bold;
text-decoration:none;
font-size: 14px; /*Q change */
right: 0px;
/* position: absolute; */
/* display: inline-block; */
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
font-size: 14px; /*Q change font size*/
display: none;
position: absolute;
background-color: silver;
min-width: 160px;
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: orange}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.btn:hover, .dropdown:hover .btn {
background-color: silver;
}
I'm trying to create a nav bar where the links are only separated by a small space on one line. When I try to implement this they go onto two lines with large spaces and can't seem to change this.
From your comments and the pictures you provided I think this is what you are looking for.
/* Reset Browser Default Styles
-------------------------------------- */
* { margin:0; padding:0 }
/* General Styles
-------------------------------------- */
body {
font: 12px/1.2 Verdana, serif;
}
header {
background: #5D2C2C;
padding: 10px;
/* lay out content from right to left */
text-align: right;
}
a {
color: white;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Nav Styles
-------------------------------------- */
nav > * {
display: inline-block;
/* nav text should be left to right */
text-align: left;
}
nav menu {
/* dropdown menus need to be on top of page content */
position: absolute;
z-index: 1;
/* make them look nice */
padding: 10px;
background: #5D2C2C;
}
/* Show/hide the dropdown menu */
nav menu a {
display: block;
}
nav a + menu {
display: none;
}
nav a:hover + menu,
nav a + menu:hover {
display: block;
}
<header>
<nav>
Introduction
History
National Flags
<span>
International Maritime Signal Flags
<menu>
Maritime Signal: Letters
Maritime Signal: Numbers
</menu>
</span>
</nav>
</header>
Editable demo: http://jsbin.com/xojomi/2
I'm trying to create a nav bar where the links are only separated by a small space on one line.
Don’t apply any CSS.
For example:
Link1
Link2
Link3
Link4
I am new to web programming. I want to create buttons in html and when you hover over it, it shows a drop down of options for pages you want to go to.
Any help is appreciated. Thanks!
Here's a very basic example of what you're trying to achieve. It's actually not a button, but a styled list. Since you're new to HTML, I'll post the entire code, so that you can copy and paste it:
#button {
/* Box in the button */
display: block;
width: 190px;
}
#button a {
text-decoration: none;
/* Remove the underline from the links. */
}
#button ul {
list-style-type: none;
/* Remove the bullets from the list */
}
#button .top {
background-color: #DDD;
/* The button background */
}
#button ul li.item {
display: none;
/* By default, do not display the items (which contains the links) */
}
#button ul:hover .item {
/* When the user hovers over the button (or any of the links) */
display: block;
border: 1px solid black;
background-color: #EDC;
}
<body>
<div id="button">
<ul>
<li class="top">OtherOverflow Sites</li>
<li class="item">Visit serverfault</li>
<li class="item">Visit superuser</li>
<li class="item">Visit doctype</li>
</ul>
</div>
</body>
Sounds like you're looking for some simple CSS-based dropdowns - I recommend what's called a "Suckerfish" style dropdown. This link uses several items for a horizontal menu, but it can easily be adapted to one link.
http://htmldog.com/articles/suckerfish/dropdowns/