Unfortunately it wont display my drop-down nav block on hover, hope someone can help. I'm trying to change display:none to display: block on the class .moreMenu.
html
css
Here is my code...
HTML
<div class="navigationBar">
<div class = "navigationBarTitles">
HOME
VERBS
NOUNS
ADVERBS
ADJECTIVES
GRAMMAR
<a href="contact.html" class= "more">MORE
<div class="moreMenu">
TRIAL VIDEOS
ABOUT
CONTACT
GCSE EXAM PREP
PLANS & PRICING
GRAMMAR
</div>
</a>
</div>
CSS
.moreMenu {
display: none;
position: absolute;
width: 140px;
height: 180px;
background-color: white;
z-index: 2;
}
.more:hover .moreMenu {
display: block;
}
You have an error in your HTML: you can't nest interactive elements. Since the .moreMenu div contains <a> elements, and is itself contained in an <a> element, it won't work.
Solution: don't put the <div> inside the MORE link, but put them next to each other in a container.
.more {
display: inline;
}
.moreMenu {
display: none;
position: absolute;
width: 140px;
height: 180px;
background-color: white;
z-index: 2;
}
.more:hover .moreMenu {
display: block;
}
<header>
<div class="navigationBar">
<div class="navigationBarTitles">
HOME
VERBS
NOUNS
ADVERBS
ADJECTIVES
GRAMMAR
<div class="more">MORE
<div class="moreMenu">
TRIAL VIDEOS
ABOUT
CONTACT
GCSE EXAM PREP
PLANS & PRICING
GRAMMAR
</div>
</div>
</div>
</div>
</header>
Related
When I try to size down my desktop screen navigation size of 1440px(90em) to any lower width screen, my navigation bar links start dropping off the screen. I have tried using some media query combinations, but nothing to show for it.I haven't got much experience with frontend, so I am a little bit thin on this side. Any long-term fixes to this one?Any hint on this one will be highly appreciated.
HTML header code:
<!--header-->
<header>
<nav class="nav__bar">
<a href="#" class="logo">
<img src="./images/logo.svg" alt="Sunnyside logo">
</a>
<ul class="nav__links">
<li class="nav__item">
About
</li>
<li class="nav__item">
Services
</li>
<li class="nav__item">
Project
</li>
Contact
</ul>
<img src="./images/icon-hamburger.svg" alt="toggle menu icon" class="toggle__menu">
</nav>
</header>
CSS header styles:
header {
height: 5em;
position: absolute;
left: 0;
right: 0;
}
.nav__bar {
height: 100%;
width: 90em;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
flex: 1 1 auto;
padding: 0 2em;
}
.nav__links {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
list-style: none;
}
.nav__item {
margin: 1em;
}
.nav__link {
text-decoration: none;
font-size: 1.125em;
color: hsl(0, 0%, 100%);
font-family: 'Barlow', sans-serif;
transition: all 350ms ease-in-out;
}
.nav__link:hover {
color: hsl(232, 10%, 55%);
}
.toggle__menu {
cursor: pointer;
display: none;
}
In your example code, you set the color of the link text to white... it's white on white. But that's not fully the problem... you should also remove width:90em from the .nav_bar... it's unnecessary. see this codepen https://codepen.io/aequalsb/pen/jOmyJNp
Just simply allow the <nav> to "be itself"... which is a block level element and naturally attempts to stretch out to fit available width.
padding in CSS Sizes the margin inside a button or element. Try using margin: (how many 'px' it's going off the screen); and I've had this problem before:
SOLUTION 1:
use margin-*left or top*: *px is going off screen*
<style>
#button {
width: 100px; /* the width of the button */
position: absolute;
left: 50%; /* always 50% when centering */
margin-left: -50px; /* minus half the size of the element */
}
</style>
<button id="button">Center of page</button>
SOLUTION 2
i've had this problem before, and in best situations, use position: absolute instead of relative if you are positioning the element.
<head>
<style>
.background {
position: relative;
}
.overlap {
position: absolute;
left: 30px;
}
</style>
</head>
</style>
</head>
<body>
<!-- background-element -->
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/Circle_Rufous_Solid.svg/1200px-Circle_Rufous_Solid.svg.png" class="background" width="10.5%" />
<!-- Overlap element -->
<img src="https://cdn.onlinewebfonts.com/svg/img_24930.png" class="overlap" width="10%" />
</body>
SOLUTION 3
if none of the above works, consider using javascript: device tester command and redirect to an error page with unsupported devices.
This example will detect a handful of mobile-devices, and if so, it'll redirect to 𝘩𝘵𝘵𝘱://𝘨𝘰𝘰𝘨𝘭𝘦.𝘤𝘰𝘮
<script>
if( /Android|webOS|iPhone|iPad|Mahc|Macintosh|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
window.location.href = "http://google.com";
} else {
}
</script>
NOTE: if there is big problem you cannot solve, and none of these work, its best to do research or find some articles to find your answer. Then consider using stackoverflow.
https://www.citywidelaw.com/
For this page, there is a section with a Q and A (you click on question and answer is next to it. The Q symbol and A symbol are supposed to line-up. I'm not sure why the A is dropping. I tried a , but it had no effect.
I added an image. Thanks in advance.
HTML
<div class="row">
<div class="col-xs-12">
<div id="verticalTab" class="resp-vtabs" style="display: block; width: 100%; margin: 0px;">
<h2 class="resp-vtabs-heading">
<ul class="resp-tabs-list">
<div class="resp-tabs-container">
</div>
</div>
</div>
CSS:
.resp-vtabs .resp-tabs-container {
clear: none;
float: left;
min-height: 350px;
padding: 0 0 0 40px;
width: 53%;
}
.resp-tabs-container {
background-color: #fff;
clear: left;
padding: 0;
}
The "Q" symbol, the <h2> element, is an element above the two columns.
So here's what I would do. Create a <div> element around the <h2> and <ul> elements with a class of, say, resp-tabs-list-container. Then just rename, in your CSS, the selector .resp-vtabs ul.resp-tabs-list to .resp-vtabs .resp-tabs-list-container.
Pow.
ETA: Thanks for all the help, everyone! These all worked beautifully. Thanks so much for your time!
I'm coding a newsletter (live preview here and my goal for it here) and am trying to get the navigation buttons ('Join Meet Learn Support') to sit about halfway down the logo. When I try top-margin in the navButtons class I'm not seeing any success. I suspect it's a display issue, but I'm not sure --- changing from inline to inline-block didn't really help.
<!DOCTYPE html>
<html>
<head>
<title>The Leaflet</title>
<style>
div
{
display: inline;
}
a
{
text-decoration: none;
}
p
{
text-align:left;
margin-left: 130px;
margin-right: 130px;
max-width: 600px;
}
#logo /* This sets the width for the New Leaf logo at the top. This should not change.*/
{
position:relative;
}
#navButtons
{
position:relative;
right:-240px;
}
#announcementImage
{
margin-left: 120px;
margin-right: 120px;
}
a.joinButton
{
margin-left:40%;
color:white;
background-color: #f7853e;
font-size: 30px;
}
a.navButton
{
color:#494541;
font-size: 22px;
}
</style>
</head>
<body>
<div id="logo"> <! --- Sets up the logo --->
<img src ="images/NLNewsletterLogo.png">
</div>
<div id="nav buttons"> <! --- Navigation Bar--->
<a class = "joinButton" href="url">Join</a>
<a class = "navButton" href="url"> Meet </a>
<a class = "navButton" href="url">Learn </a>
<a class = "navButton" href="url">Support </a>
</div>
<br>
<br>
<br>
<br>
<br>
<div id ="announcementImage"><! --- Lead Image-->
<img src="images/announcementGraphic.png">
</div>
<div id = "announcementText">
<p>Thrive Week is in full swing here at the Leaf. So far, we've had Sharon Perry, head of the State
College Area School District Career Center, help participants identify which of 34 traits,
including the special quality of woo, are strengths they employ in various settings so they can
work smarter. Then Anna Gokieli, owner of Tru Meditation and Yoga, got us staying present and
peaceful even in situations that often trigger stress. Will Snyder brought it home last night by
showing how making art and making money don't have to conflict.
Have a comment on a workshop you've attended or a session you'd like to see in our remaining
Design and Launch weeks? Galen would love to hear from you!</p>
</div>
</body>
Try this
#logo {
display: inline-block;
vertical-align: middle;
}
#nav {
display: inline-block;
vertical-align: middle;
width: 100%;
}
I think what your looking for is:
#logo {
vertical-align: middle;
}
Try adding bottom of something like 60px to div with id nav buttons.
Since this element is position: relative, it's placement can be controlled with left, right, top, bottom, like so:
#nav#buttons {
bottom: 50px;
}
Floating the logo left, and adding margin to the #nav will do the trick.
#logo { float: left; }
#nav {margin-top: 80px; width: 100%; display: inline-block; }
h1.title { clear: left; }
You're almost there. Inline-Block is what I'd use with absolute positioned nav, but you have a generic div {position:inline;} that applies to everything on the page inside of a div. You should be more specific for your logo and nav and just get rid of the generic styling by giving each a class like <div class="WHATEVER"> so you can target the div you want to work on.
Then try this:
#logo {
width: 240px;
display: inline-block;
#nav buttons {
margin: 0px 0px 0px 80px;
display: inline-block;
position: absolute;
top: 80px;}
I have five different images being used as buttons for my website's navigation. I want them to be inline horizontally and centred in the browser window. They looked fine until I added code to have text appear under each button when hovering over each image. The buttons are now all aligned vertically in the middle of the window.
In html file:
<div class="nav">
<div class="container">
<ul>
<div class="about">
<li><input type="image" src="image.png" id="aboutPage" onClick = 'aboutPage()'/></li>
<p class = "text1"> About </p>
</div>
<div class="resume">
<li><input type="image" src="image.png" id="resumePage" onClick = 'resumePage()'/></li>
<p class = "text2"> Resume </p>
</div>
<div class="home">
<li><input type="image" src="image.png" id="homePage" onClick = 'homePage()'/></li>
<p class = "text3"> Home </p>
</div>
<div class="portfolio">
<li><input type="image" src="image.png" id="portfolioPage" onClick = 'portfolioPage()'/></li>
<p class = "text4"> Portfolio </p>
</div>
<div class="contact">
<li><input type="image" src="image.png" id="contactPage" onClick = 'contactPage()'/></li>
<p class = "text5"> Contact </p>
</div>
</ul>
</div>
In CSS file:
.nav {
position: absolute;
bottom: 0%;
left: 50%;
transform: translate(-50%, -50%);
}
.nav .container {
font-size: 12px;
font-family: 'Shift', sans-serif;
color: #5a5a5a;
font-weight: lighter;
}
.nav .container ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.nav .container li {
display: inline;
}
The following is a sample of the hover code for each image:
.nav .container .about .text1 {
position:relative;
bottom:0px;
text-align: center;
visibility: hidden;
}
.nav .container .about:hover .text1{
visibility: visible;
}
Any help would be much appreciated! Thank you.
First of all, I have a few remarks when it comes to your markup. I know this is not code review, and not entirely relevant to the question, but I just can't help myself when I look at the HTML:
a div.nav just screams to me that you in fact want to use a nav
that div.container seems obsolote to me, and just adds markup. If you realy need the container class (for css or js reasons), why not add it to the ul in stead.
an ul can only have li elements as direct child, so those div elements should become a child of the li in stead of a parent.
why are you using (the very rare) input[type=image] elements, in stead of the usual <a><img></a>? It just seems strange.
using a different class for each text seems to serve no purpose. It just makes your code harder to maintain and your css a lot more verbose. I wonder if you need a class at all, but If you have a good reason, at least use the same class for all the text blocks.
Taking those remarks into account, my markup would look something like this:
<nav>
<ul class='container'>
<li>
<a href='#'>
<img src='' alt='do not forget your alt, especially for nav!' />
<p>text</p>
</a>
</li>
...
</ul>
</nav>
Then for your actual question, I am not entirely sure I understand what you are trying to achieve, but this is what I came up with. The css looks something like this.
nav {
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
text-align: center;
}
nav ul {
font-size: 12px;
font-family:'Shift', sans-serif;
color: #5a5a5a;
font-weight: lighter;
list-style-type: none;
margin: 0;
padding: 0;
}
nav li {
margin: 12px;
display: inline-block;
}
nav p {
opacity: 0;
transition: opacity .5s;
}
nav a:hover p {
opacity: 1;
}
Note that I went for opacity in stead of visibility because that allows you to add a transition, which I find to give a much nicer experience. You should be able to use visibility as well though (or just remove the transition) for an instant state switch.
I hope this puts you on the right track. Let me know if I misunderstood anything, or if you want me to explain further.
I'm running into a weird glitch which only seems to happen in chrome and safari. It's hard to explain why this happens with sample code, but I'll try to illustrate what I'm doing with code, while providing a link to the actual page below.
First of all, I have an unordered list displayed inline-block, so it can be justified just like text. Each list item contains an svg in an image tag and a paragraph with a short description, both wrapped in a single anchor tag. Nothing special i guess, but here's the catch: in chrome and safari the browser renders a 1px by approximately 15px blue/blackish line between the paragraph and the image, and I have no idea why this is happening. Here's the code:
<div class="wrapper">
<div class="justified-list home-icons">
<ul>
<li>
<a href="#">
<img src="http://voctel.wearebold.nl/wp-content/uploads/2015/02/company-building.svg" />
<br/>
<p>Description</p>
</a>
</li>
<li>
<a href="#">
<img src="http://voctel.wearebold.nl/wp-content/uploads/2015/02/company-building.svg" />
<br/>
<p>Description</p>
</a>
</li>
<li>
<a href="#">
<img src="http://voctel.wearebold.nl/wp-content/uploads/2015/02/company-building.svg" />
<br/>
<p>Description</p>
</a>
</li>
</ul>
<span class="stretcher"></span>
</div><!-- .justified-list -->
</div><!-- .wrapper -->
and here is the css (I'm using scss):
.wrapper {
width: 100%;
}
.justified-list {
width: 100%;
text-align: justify;
* {
display: inline;
}
li {
display: inline-block;
vertical-align: top;
}
.stretcher {
display: inline-block;
position: relative;
width: 100%;
height: 0;
}
}
Also, a codepen is provided here:
http://codepen.io/smelly586/pen/NPVVYd
If anyone has a clue on what's going on, or even better: has a possible fix for this, you have my gratitude.
Set your font-size on the element to 0. What you're seeing is the underline in the anchor element for whitespace in your HTML.
You could turn off the text-decoration: underline; that the browser renders by default for anchors, but let's assume that's not what you want to do.
Instead, the element with text will need to be reset to document root font-size (or whatever you want) using something like p { font-size: 1rem; }.
Example Codepen
So, accordingly, the SCSS/LESS would be:
.justified-list {
width: 100%;
text-align: justify;
* {
display: inline;
}
li {
display: inline-block;
vertical-align: top;
a {
font-size: 0;
p { font-size: 1rem; }
}
}
.stretcher {
display: inline-block;
position: relative;
width: 100%;
height: 0;
}
}