I am working on my website, and I have come to an impasse: the links which I have created in my navigation bar do not redirect the user to another page on my site.
As can be seen here, I am using a simple navigation bar with a technique I found at gmarwaha.com. I tried to follow the instructions as best I could, but it seems I have missed a step - unfortunately I cannot figure out what that step is!
The CSS is a little different than what is on the site, but it still came from there, anyhow. It can be seen below:
.lavaLampBottomStyle {
position: relative;
height: 29px;
width: 342px;
background-color: white;
padding: 15px;
margin: 10px 0;
overflow: hidden;
border: 1px solid gray;
margin-left: auto;
margin-right: auto; }
.lavaLampBottomStyle li {
float: left;
list-style: none;
}
.lavaLampBottomStyle li.back {
border-bottom: 5px solid blue;
width: 9px;
height: 30px;
z-index: 8;
position: absolute;
}
.lavaLampBottomStyle li a {
font: bold 14px arial;
text-decoration: none;
color: #000;
outline: none;
text-align: center;
top: 7px;
text-transform: uppercase;
letter-spacing: 0;
z-index: 10;
display: block;
float: left;
height: 30px;
position: relative;
overflow: hidden;
margin: auto 10px;
}
.lavaLampBottomStyle li a:hover, .lavaLampBottomStyle li a:active, .lavaLampBottomStyle li a:visited {
border: none;
}
The JavaScript placed in the head of my document is also very important:
$(function() {
$("#1, #2, #3").lavaLamp({
fx: "backout",
speed: 700,
click: function(event, menuItem) {
return false;
}
});
});
If anyone would be able to aid me in finding this error, I would be very grateful.
From the example code it's hard to tell but returning false from a click will prevent the action.
Related
I'm new to the whole CSS coding and sometimes I get stuck. I followed an online tutorial on how to make a search bar that is animated so it looks pleasing. I'm doing a website for my school project and I'm almost finished just adding few bits here and there. It's about technology from the beginning of the 20th century to our present day.
.search-pos {
display: block;
margin-left: auto;
width: 330px;
position: relative;
top: -40px;
}
.search-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-55%, -55%);
background: white;
height: 40px;
border-radius: 60px;
padding: 10px;
}
.search-box:hover>.search-txt {
width: 240px;
padding: 0 4px;
}
.search-box:hover>.search-btn {
background: white;
padding: 10px;
}
.search-btn {
color: black;
float: center;
width: 30px;
height: 30px;
border-radius: 80%;
background: white;
display: flex;
justify-content: center;
align-items: center;
transition: 0.4s;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 14px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}
<div class="search-pos">
<div class="search-box">
<input class="search-txt" type="text" name="" placeholder="Type to search">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
</div>
</div>
I've tried changing the padding, positioning or even the height but nothing seems to work. I think I need to add another line of code but I'm unsure what it would be.
This what happens:
Image / Imgur
As you can witness the button doesn't stay inside the bar itself like it should.
Like Dejan.S I did not get what is the problem.
Be carreful you put a top in a relative class .search-pos, it doesnt work !
I copy your code in CodePen and I think the problem comes from in a other class or maybe in your $search.pos class
https://codepen.io/auxb/pen/WNQjjyp?editors=1100
(I replace the font icon by a img but is the same)
Tell me if this code satisfied you !
For what i understand you need to change your css a little bit.
.search-pos {
display: block;
margin-left: auto;
width: 330px;
height:40px;
position: relative;
}
.search-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-55%, -55%);
background: white;
height: 40px;
border-radius: 60px;
padding: 10px;
display:flex;
}
.search-box:hover>.search-txt {
width: 240px;
padding: 0 4px;
}
.search-box:hover>.search-btn {
background: white;
padding: 10px;
}
.search-btn {
color: black;
float: center;
width: 30px;
height: 30px;
border-radius: 80%;
background: white;
display: flex;
justify-content: center;
align-items: center;
transition: 0.4s;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 14px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}
Let me know, if this solution helps you.
Try putting the code that handles the hover after the specified elements:
.search-box:hover>.search-txt
should come after
.search-txt
also
.search-box:hover>.search-btn
should come after
.search-btn
Hope that helps in ensuring the hover effects work as expected.
Also there is no CSS property such as float: center;
Can someone help me with the top navbar. Im trying to make a dropdown menu that goes down 3 levels. I have 2 levels already and my third level is messing up. I tried doing it the same way as 2 level but it doesn't work. Thanks!
Here is JsBin https://jsbin.com/harukif/edit
Part of CSS:
li a:hover {
background-color: #c0b283;
color: white;
}
.dropdown:hover .dropbtn {
background-color: #c0b283;
}
li.dropdown {
display: inline-block;
text-align: left;
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
top: 100%;
left: 0px;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 10;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
.content{
margin-top:75px;
}
From my experience:
<h3> tags should probably only wrap directly around text or maybe spans.
You have inline styling on your <img>, you can move that to topNav.css
Your content should be inside body, including <h1>
You should only put <li> inside <ul>, you can put other stuff inside <li>
Try not to use <a href="#"> to hold non-link content
Float is a totally valid way of doing things, but if you learn flexbox it's more logical, more powerful, produces neater results and responds better on all devices.
The trick to good CSS is clean HTML.
Try this: https://jsbin.com/wahegoc/2/edit?html,css,output
try to use for the third level a div that is absolute positioned with:
top: 0;
left: 100%;
This will cause that the third menu will appear on the right side of the current hovered element of the second menu.
Here how it looks like in your code - https://jsbin.com/cizoxagubu/1/edit?html,css,output
Here is your solution, please let me know if it works.
.topnav {
position: fixed;
top: 0;
left: 0;
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #f4f4f4;
z-index: 10;
}
.topmenu {
float: left;
font-family: 'Lato', sans-serif;
}
.topmenu a {
display: block;
color: #424242;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #c0b283;
color: white;
}
.dropdown:hover .dropbtn {
background-color: #c0b283;
}
li.dropdown {
display: inline-block;
text-align: left;
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
top: 100%;
left: 0px;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 10;
}
.dropdown-content .dropdown-content {
left: 100%;
position: absolute;
top: 0;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content:hover {
background-color: #f1f1f1
}
.dropdown:hover > .dropdown-content {
display: block;
}
.dropdown > .dropdown-content a:hover + .dropdown-content {
display: block;
}
.content{
margin-top:75px;
}
Check the jsbin: https://jsbin.com/sefikaqiyo/edit?html,css,js,output
please hover: content and then hover country examples
I am having trouble with menu icons aligning to the right.
So far I have my logo on the left and the menu icons on the right, however their order is reversed. Instead of home, portfolio, contact it displays as contact, portfolio, home. I understand that this is because the li is set to float left. However, when I float the links to the right to have them display in the correct order, the entire links menu will move to the left, leaving a large gap to the right of the last link. (I want the links to display on the far right of the header browser window and my logo on the far left). In my attemps to fix the order of the links, I messed up their positioning within the header.
Currently it is optimised for mobile devices and re-sizing the window will create a hamburger icon and the menu drops down with the text centered left. I want this unchanged, I just want my links to be positioned in the correct order and far right as possible on browser windows in the correct order.
I also had a friend (using a larger monitor) have the links show up in the middle of the header which I am not sure why that is happening as they display correctly on my screen.
Any help would be greatly appreciated :D
Codepen with the preview is here; http://codepen.io/AnishaDesigns/pen/wdzNQq
*{
margin: 0px;
padding: 0px;
}
#font-face {
font-family: 'Coolvetica'; /*Font name*/
src: url('coolvetica.ttf'); /*URL to font*/
}
body {
background-color: #E6E9EC;
}
ul {
float: right;
list-style: none;
width: 50%;
height: 60px;
padding: 0px;
font-family: 'coolvetica';
font-size: 13px;
text-transform: uppercase;
letter-spacing: 5px;
}
li{
display: inline;
float: right;
width: auto;
height: 60px;
background: #A62841;
margin-right: 20px;
}
li a{
display: block;
float: left;
height: 60px;
line-height: 60px;
padding: 0 5px;
color: #E6E9EC;
text-decoration: none;
}
header {
float: left;
width: 100%;
height: 60px;
background-color: #A62841;
}
header #branding{
margin:0px;
padding: 10px 0px 5px 20px;
float: left;
}
#media (max-width: 768px){
.menu-icon{
display: block;
width: 32px;
height: 32px;
background:url("images/menu-icon.svg") no-repeat center;
position: absolute;
top: 13px;
right: 16px;
}
header nav ul{
overflow: hidden;
height: 0px;
width: 100%;
background: #A62841;
padding: 0px;
margin: 0px;
}
header nav ul.open{
height: auto;
}
h1{
width: 100%;
float: left;
margin-left: 20px;
}
header nav ul li {
width: 100%;
height: 50px;
margin-right: 0px;
margin-bottom: 10px;
}
header nav ul li a {
width: 100%;
float: left;
margin-left: 20px;
line-height: 50px;
}
header{
height: 60px;
width: 100%;
}
}
I have edited the code and added float:left; to li and changed to width: auto; for ul.
ul {
float: right;
list-style: none;
width: auto;
height: 60px;
padding: 0px;
font-family: 'coolvetica';
font-size: 13px;
text-transform: uppercase;
letter-spacing: 5px;
}
li{
display: inline;
float: left;
width: auto;
height: 60px;
background: #A62841;
margin-right: 20px;
}
http://codepen.io/athira151292/pen/JNRzjo
Apply float:left to li elements and assign width:auto to the ul element. If you want fix some width for ul then use max-width:50% for that.
ul {
float: right;
list-style: none;
width:auto;
max-width: 50%;
height: 60px;
padding: 0px;
font-family: 'coolvetica';
font-size: 13px;
text-transform: uppercase;
letter-spacing: 5px;
}
li{
display: inline;
float: left;
width: auto;
height: 60px;
background: #A62841;
margin-right: 20px;
}
DEMO
change the width of ul from 50% to auto and float:left
I really thought I knew how to do this, and I know there are a LOT of questions about this, but I haven't seen an answer that matches my ludicrously simple case.
Here's the html:
<div id="examined-evidence">
<div id="examined-evidence-details">
<div class="heading"><p>I would like this text to float left and, if necessary, flow AROUND the close button which, ideally, would stay put in the top right corner, where most reasonable people would expect a close button to sit. Surely this should be more straight forward.</p></div>
<div id="examined-evidence-close-button" class="button"></div>
<div class="clear"></div>
</div>
</div>
And here's the css:
#examined-evidence {
z-index: 1000;
display: none;
position: absolute;
left: 25%;
top: 10%;
width: 50%;
height: 80%;
background-image: url('../assets/images/transparent_grey_tint.png');
border: 1px solid #33ffff;
padding: 0px;
margin: 0px;
}
#examined-evidence.active {
display: inline-block;
}
#examined-evidence #examined-evidence-details {
background-color: #333333;
}
#examined-evidence #examined-evidence-details .heading {
padding: 0px;
float: left;
display: inline-block;
}
#examined-evidence #examined-evidence-details .heading p {
text-align: center;
padding: 3px 12px 3px 12px;
display: inline-block;
font-size: 0.75em;
color: white;
margin: 0px;
}
#examined-evidence #examined-evidence-image {
text-align: center;
margin: 0px auto;
height: 80%;
width: auto;
}
#examined-evidence #examined-evidence-image img {
height: 80%;
}
#examined-evidence-close-button {
background-color: red;
display: inline-block;
float: right;
height: 34px;
width: 34px;
margin: 0px;
padding: 0px;
}
.clear {
clear: both;
}
...but, despite setting almost everything to inline-block, the close button div still displays BELOW the text div, in IE and in Chrome.
(And just FYI, the img src gets set from javascript, so please don't worry about that.)
If anyone has any ideas, I'm dying to show this web page who's boss. What did I screw up this time?
Drop your close button into an inline-span inside the p element, adjust your margins, and you should be all set:
#examined-evidence {
z-index: 1000;
position: absolute;
left: 25%;
top: 10%;
width: 50%;
height: 80%;
background: dimGray;
border: 1px solid #33ffff;
padding: 0px;
margin: 0px;
}
#examined-evidence.active {
display: inline-block;
}
#examined-evidence #examined-evidence-details {
background-color: #333333;
}
#examined-evidence #examined-evidence-details .heading {
padding: 0px;
float: left;
display: inline-block;
}
#examined-evidence #examined-evidence-details .heading p {
text-align: justify;
padding: 3px 12px 3px 12px;
display: inline-block;
font-size: 0.75em;
position: relative;
width: 100%;
color: white;
margin: 0px;
}
#examined-evidence #examined-evidence-image {
text-align: center;
margin: 0px auto;
height: 80%;
width: auto;
}
#examined-evidence #examined-evidence-image img {
height: 80%;
}
#examined-evidence-close-button {
background-color: red;
display: inline-block;
float: right;
height: 34px;
width: 34px;
padding: 0px;
position: relative;
margin: 0px 15px 10px 10px;
}
.clear {
clear: both;
}
<div id="examined-evidence">
<div id="examined-evidence-details">
<div class="heading"><p><span id="examined-evidence-close-button" class="button"></span>I would like this text to float left and, if necessary, flow AROUND the close button which, ideally, would stay put in the top right corner, where most reasonable people would expect a close button to sit. Surely this should be more straight forward.I would like this text to float left and, if necessary, flow AROUND the close button which, ideally, would stay put in the top right corner, where most reasonable people would expect a close button to sit. Surely this should be more straight forward.I would like this text to float left and, if necessary, flow AROUND the close button which, ideally, would stay put in the top right corner, where most reasonable people would expect a close button to sit. Surely this should be more straight forward.</p></div>
<div class="clear"></div>
</div>
</div>
I would like to make it so that when a div with the class "dropdown" is hovered over, a certain piece of text with the id "workButton" would underline. I would like to do this using jQuery, unless it is possible to make it happen in CSS. I currently have it so that when the text is hovered over it underlines and turns white, but I would like the same to happen when "dropdown" is hovered over. (the text with the id "workbutton" also has the class "menuContent")
CSS:
.menuContent:hover {
text-decoration: underline;
cursor: pointer;
color: #ffffff;
}
.menuContent {
font-family: "cicle-gordita";
text-align: center;
padding: 0px;
margin: 0px;
margin-top: 10px;
color: #b4b0b0;
text-decoration: none;
font-size: 40px;
}
.dropdown {
margin-top: 50px;
height: 50px;
width: 100%;
background: #ffffff;
position: fixed;
display: none;
}
.dropdown-menuBit {
height: 40px;
margin: 0px;
padding: 0px;
float: left;
margin-left: 20px;
}
.dropdown-menuContent {
font-family: "cicle-gordita";
text-align: center;
padding: 0px;
margin: 0px;
color: #b4b0b0;
text-decoration: none;
font-size: 30px;
padding-top: 5px;
}
.dropdown-menuContent:hover {
text-decoration: underline;
cursor: pointer;
color: #ffffff;
}
JQuery:
var main = function() {
$('.dropdown').hide(function() {
$('.main').animate({
top: "-50px"
}, 0);
});
$('#workButton').hover(function() {
$('.dropdown').fadeIn(1)
$('.main').animate({
top: "0px"
}, 100)
});
$('.main, #blogButton, #homeButton, .logo').hover(function() {
$('.dropdown').fadeOut(200)
$('.main').animate({
top: "-50px"
}, 200)
});
Just place the :hover on the parent and it should work just fine:
.dropdown:hover #workButton