I tried to get a hamburger menu working with only css.
The problem is that my checked function doesn't work as intended and I cant figure out what I got wrong.
The hamburger menu starts at 1000px.
I used input with checkbox to switch between open and close.
#toggle:checked + .menu { display: block;}
.menu a {
font-size: 22px;
}
#toggle {
display: none;
}
.menu {
text-align: center;
width: 100%;
display: none;
}
#toggle {
display: block;
}
#toggle:checked+.menu {
display: block;
}
<a herf="#">
<input type="checkbox" id="toggle">
<div class="menu">
Home
Resources
Monthly
Terms
Privacy
</div>
</a>
You've wrapped these some of these elements in malformed links (herf?)....and that's not permitted by HTML
See this Q&A
The browser seems to be autoclosing the link wrapper just after the input which means that the :checked + selector fails.
Remove the link or change it to something innocuous, like a div.
nav .menu a {
text-decoration: none;
color: white;
font-weight: 700;
padding: 0 1% 0 1%;
}
.menu a {
font-size: 22px;
}
#toggle {
display: none;
}
.menu {
text-align: center;
width: 100%;
display: none;
}
nav .menu a {
display: block;
color: #2b9dff;
background-color: white;
border-bottom: 1px solid #2b9dff;
margin: 0;
}
#toggle {
display: block;
}
#toggle:checked+.menu {
display: block;
}
<input type="checkbox" id="toggle">
<div class="menu">
Home
Resources
Monthly
Terms
Privacy
</div>
Related
Good morning,
I have a menu with a few options. I want to display an image and next to it a string, menu hyperlink. For example:
<ul>
<li class="category" id="category-19">
<a class="dropdown-item" href="http://localhost/new.domain/test-test" data-depth="0">
::before
Test Test
</a>
</li>
</ul>
And my CSS:
#header .menu, #header .menu > ul > li {
display: inline-block;
}
ul {
list-style: none;
}
#_desktop_top_menu a {
text-transform: uppercase;
}
.top-menu a[data-depth="0"] {
font-weight: 600;
padding: .1875rem .625rem .375rem;
}
.dropdown-item {
display: block;
width: 100%;
padding: 3px 1.5rem;
clear: both;
font-weight: 400;
color: #373a3c;
text-align: inherit;
white-space: nowrap;
background: none;
border: 0;
}
I Want to have something like that:
How to get this effect ? thanks for any help.
You can use the <pre> tag before Test and close it.
The tag defines preformatted text.
You can force-wrap be giving it a fixed size and using word-wrap:
.dropdown-item {
display:block;
width:150px;
word-wrap:break-word;
}
I've been trying to get multiple background images on my page but I couldn't get more than 2, so I started to think that I might use divs instead. But when I use divs I got like 5 white pixels left at the top and and sides of the screen, that was until I changed the position to absolute but then my navbar was stuck behind the div... If anyone could please help me fixing my issue.
My code isn't that good, but this is what I have at the moment:
#P1Tekstvlak1_1 {
background-image: url("DakB1.jpg");
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
/** — Navbar —*/
#nav {
color: FFFFFF;
opacity: 0.9;
}
#nav_wrapper {
width: auto;
margin: 0 auto;
text-align: left;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: fixed;
min-width: 200px;
text-align: center;
background-color: #B50B26;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
color: white;
text-align: center;
text-shadow: 1px 1px 1px #FFFFFF;
}
#nav ul li a,
visited {
color: #FFFFFF;
font-size: 20px;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
<div id="nav">
<div id="nav_wrapper">
<ul>
<li>Home</li>
<li>Over</li>
<li>Renovatie</li>
<li>Nieuwbouw</li>
<li>Vacatures</li>
<li>WKA</li>
<li>Contact</li>
</ul>
</div>
</div>
Remove the absolute positioning and then apply a CSS reset like the one here . Browsers have some styling attributes it applies by default for accessibility purposes. You should remove them. I do this before starting to build any web UI.
Note: Absolute positioning will stack elements versus applying layout to them. That is why you are seeing it behind your NAV
So I have the code below.
<nav>
<div class="clicker" tabindex="1">menu</div>
<div class="hiddendiv"> Register
Login</div>
</nav>
with the following css
nav{ margin-top: -70px;
} .clicker { font-size: 4em; outline:none; cursor:pointer; float:right; border-padding:4px; border-right: 5px solid #ed2024; }
.hiddendiv{ display:none; width:300px; font-size: 2em; background-color:#ed2024; float:left; padding:5px; }
.clicker:focus + .hiddendiv{ display:block; }
.clicker:focus{ display:block; float:left;
}
.hiddendiv a{ float: left;
margin-left: 10px;
}
I understand that focus doesn't let me click the link within the .hiddendiv element, but target doesn't seem to work either. I'd like to build this with css only. any tips?
If you want to show/hide content via CSS, I would use a checkbox label to toggle state.
.clicker {
font-size: 4em;
cursor: pointer;
}
.hiddendiv, #checkbox {
display: none;
}
input:checked + .hiddendiv {
display: block;
}
<nav>
<label class="clicker" tabindex="1" for="checkbox">clicker</label>
<input id="checkbox" type="checkbox">
<div class="hiddendiv"> Register
Login</div>
</nav>
But if you want to trigger it on :target you would do it like this
.clicker {
font-size: 4em;
cursor: pointer;
}
.hiddendiv {
display: none;
}
.hiddendiv:target {
display: block;
}
<nav>
<div class="clicker" tabindex="1">menu</div>
<div class="hiddendiv" id="hiddendiv"> Register
Login</div>
</nav>
I am making a horizontal navigation bar with a image in it, the nav bar has four links in total one of which is a image link, however the image link doesn't line up with the rest of the links on the nav bar i want to drop it down by a pixel or 2, but every time i try and reposition that image it brings the rest of the links in the div tag with it.
{ position: absolute; } and { position: relative; } puts the image link on top of the other links
http://i.imgur.com/v7Cg9kJ.jpg how it looks normally.
http://i.imgur.com/abaIdwE.jpg with absolute positioning.
Try the following:
li {
display: inline-block;
margin: 0 5px 0 0;
}
#apps {
vertical-align: middle;
}
DEMO
SNIPPET
#top-navbar {
float: right;
display: block;
padding: 10px;
word-spacing: 5px;
text-align: center;
font-family: Arial;
font-size: 13pt;
position: relative;
}
#signin {
background-color: #4387FD;
color: white;
width: 120px;
text-align: center;
padding: 5px;
text-decoration: none;
word-spacing: 1px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin: 0 5px 0 0;
}
#apps {
vertical-align: middle;
}
a {
text-decoration: none;
}
<div id="top-navbar">
<ul>
<li>Gmail</li>
<li>Images</li>
<li>
<a href="https://www.google.com/intl/en/options/">
<img id="apps" src="https://lh3.ggpht.com/ExOY2XlSbdfFFE3BZ5l44wBQEU5JVsVrertIIdjPy93yfDfomhKx0waLXA9Hhv5qvg-b3aaq=w22" />
</a>
</li>
<li>
<a id="signin" href="https://accounts.google.com/ServiceLogin?hl=en&passive=true&continue=https://www.google.com/webhp%3Fhl%3Den">Sign In</a>
</li>
</ul>
</div>
All,
I have been scratching my head for well over two hours now and I just cannot see whats wrong with the code.
I am building a liquid layout with two navigation bars at the top. The first one is sitting well but the second one (id="filem_right") refuses to sit alongside it.
Here is the HTML:
<body id="container">
<div id="main_bar">
<ul>
<li class="maintabs">Overview</li><li class="maintabs">Collar/ Neckline</li><li class="maintabs">Sleeves
<ul>
<li class="s_leftright">Left Sleeves</li>
<li class="s_leftright">Right Sleeves</li>
</ul></li><li class="maintabs">Body</li>
</ul>
</div>
<div id="filem_right">
<ul>
<li class="filetabs">File</li><li class="filetabs">Edit</li><li class="filetabs">Settings</li>
</ul>
</div>
And here is the CSS:
#container {
min-width: 960px;
max-width: 1034px;
min-height: 500px;
background: rgba(245,212,13,1);
}
/* START OF MAIN MENU */
#main_bar ul {
width: 60%;
position: relative;
left: 3.2%;
border: 1px solid black;
background: rgba(153, 244,200,0.3);
}
.maintabs {
display: inline-block;
width: 25%;
line-height: 3.5em;
list-style-type: none;
}
.maintabs a {
display: block;
text-decoration: none;
color: rgb(165,165,165);
color: rgba(165,165,165,1);
text-align: center;
font-size: 0.8em;
font-weight: bold;
text-transform: uppercase;
}
.s_leftright {
list-style-type: none;
}
.maintabs ul {
display: none;
}
.maintabs:hover > ul {
display: inline-block;
position: absolute;
}
*/ END OF MAIN MENU */
/* START OF FILE MENU */
#filem_right {
display: inline-block;
position: relative;
width: 30%;
left: 69%;
top: 14%;
right: 3.2%;
}
.filetabs {
display: inline-block;
width: 33.3%;
overflow: hidden;
list-style-type: none;
line-height: 3.5em;
}
I had a look at Firebug and it appears that none of my code for 'filem_right' is rendered by the browser (FF 3.6).
Thank you,
Your comment here is incorrect,
*/ END OF MAIN MENU */
Should be /* at the start. This could be a reason the filem_right CSS isn't being picked up by the browser.