Hello guys my navigation is going under the navigation bar after a certain width how can I make it stay there at all times? code on fiddle
https://jsfiddle.net/mohamedkna/0cm7zquh/
just decrease the width of the right-bottom corner of js fiddle and you will c that the <ul> goes under the main navigation bar disappears (It goes under the nav)
My solution with this was the float right but I can't drop the float right so any alternatives
HTML :
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Turbo</title>`
</head>
<body class="body">
<nav class="nav">
<div class="nav-container">
<img src="includes/img/main_logo.png">
Sign In
<ul class="navigation">
<li>Get Started</li>
<li>Products & Pricing</li>
<li>Help</li>
<li>Tools & Tips</li>
<li>After You File</li>
</ul>
</div>
</nav>
</body>
</html>
CSS :
*, ::after, ::before {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; }
body {
color: #000305;
font-size: 87.5%;
font-family: Arial;
text-align: left; }
a {
text-decoration: none; }
a:link, a:visited {
color: #0082c3; }
a:hover, a:active {
text-decoration: underline;
color: #004f76; }
.nav {
width: 100%;
background-color: #0082C3;
height: 75px; }
.nav-container {
width: 84.7%;
margin: 0 auto;
height: 40px;
clear: both; }
.nav img {
height: 40px;
margin-top: 18px;
vertical-align: middle; }
.navigation {
float: right;
list-style: none;
margin: 0px; }
.navigation li {
display: inline;
float: left; }
.navigation li a {
display: inline-block;
line-height: 60px;
color: #fff;
padding: 16px 15px 0 15px;
font-weight: 200;
font-size: 118%; }
.sign-in {
color: #fff;
float: right;
padding: 6px 12px;
margin: 26px 14px;
width: 75px;
font-size: 110%;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.75);
line-height: 25px;
font-weight: 200;
background-color: #FF8000;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px; }
#color {
color: #fff; }
/*# sourceMappingURL=style.css.map */
Your link bar is not disappearing, it is being pushed down below your other images.
If you set your .nav height to 160px, you will see the menu.
This won't help resolve your problem, but you can at least see where it is going.
#media screen and (max-width: 992px) {
.nav-container {
width: 95%;
}
}
this works and we can change the max-width with the width in relative to our needs
Related
So I've been learning front-end development recently, and this problem really bugs me. I wanted to make an on-hover animation for my links.
Here's the code
body{
background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(37,37,82,1)
35%, rgba(38,54,82,1) 100%);
color: white;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2em;
padding:0;
margin:0;
}
#Title{
Font-size: 3em;
text-align: center;
}
/*Global*/
.container{
width: 80%;
margin: auto;
overflow: hidden;
}
header {
background: rgb(0, 0, 0, 0.5);
min-height: 50px;
border-bottom: #ef3331 3px solid;
}
#branding {
float: left;
display: inline;
}
#branding h1 {
margin: 0;
padding: 0px;
}
header nav {
float: right;
margin: 10px;
display: inline;
}
header li {
display: inline-block;
float: left;
background-color: transparent;
}
header a {
overflow: hidden;
border-width: thick;
box-sizing: border-box;
border-radius: 5px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 15px;
background-color: transparent;
transition: 0.3s;
padding: 16px 22px;
text-align: center;
}
header a:hover {
background-color: black;
}
ul {
margin: 0;
padding: 0;
}
<header>
<div class="container" style="padding: 20px 0px;">
<div id="branding">
<h1>Anđelo Motika Design</h1>
</div>
<nav>
<ul>
<li>
<span>HOME</span>
</li>
<li> ABOUT ME </li>
<li> GALLERY </li>
</ul>
</nav>
</div>
</header>
The links keep moving during the page's loading phase. It is not what I want. I just wanna change the background of the a tag, not their position too.
Here's some screencaps to demonstrate my problem.
Just remove the below line from header a decorator in css file.
transition: 0.3s;
Also if you want to add text color while hovering , you can add this on the header a : hover
header a:hover {
background-color: black;
color: yellow;
}
As you can see in the first image, I have the underline appear under the links which covers the red "hr" that runs across the page. I want to apply the same effect on the archives and categories links but with it appearing above. I can't seem to find a way of doing it. I looked up a hover underline position, and tried using text-underline-position to being above but that doesn't do what I want it to do. How do I go about doing this?
In the second image, in the prototype I had designed to have the underline have a drop-shadow effect. How do I go about doing that with hover links? Can it even be achieved if I'm using an image as a background? Or would I need to save that as a .png with transparency? Any tips?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>My Site</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
</head>
<body>
<header></header>
<div id="NavSection">
<div id="TopNav">
<nav id="MainNav">
<ul id="Menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
<hr />
<div id="SecondNavSection">
<nav id="SecondNav">
<ul id="SecondMenu">
<li>Archives</li>
<li>Categories</li>
</ul>
</nav>
</div>
<div id="SiteTitle">
<h1 id="My">My<span id="Site">Site</span></h1>
</div>
</div>
<div id="ContentDiv">
<main id="ContentSection">
<div id="Content">
<p>Content goes here.</p>
</div>
</main>
</div>
<footer>
<p>My Site</p>
</footer>
</body>
</html>
CSS:
body {
background-color: #ffffff;
background: url(/images/background.jpg) no-repeat center center fixed;
background-size: cover;
resize: both;
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px;
font-family: Arial;
}
#font-face {
font-family: ubuntu-medium;
src: url(/fonts/ubuntu-medium.ttf);
}
/* #media (max-width:3440px){
body{background: url(/images/background.jpg) no-repeat center center fixed;}
} */
/* #media (min-width:480px){
body{background: url(/images/background.jpg) no-repeat center center fixed;}
} */
#NavSection {
margin-top: 3%;
}
#MainNav {
position: left;
margin-left: 11%;
}
#Menu li {
font-family: ubuntu-medium;
font-weight: normal;
color: #414141;
padding: 0px 10px;
display: inline;
font-size: 15px;
list-style-type: none;
}
#Menu a:hover {
text-decoration-color: #414141;
text-underline-offset: 0.12em;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-thickness: 4px;
}
hr {
margin: 0px;
border: 2px solid red;
width: auto;
}
a {
color: #414141;
text-decoration: none;
}
a:active {
color: #ff0000;
}
#SiteTitle {
margin-left: 0%;
}
#My {
font-family: Impact;
font-weight: normal;
font-size: 30px;
color: #ffffff;
text-decoration: underline;
text-decoration-color: #414141;
text-decoration-thickness: 2px;
text-underline-offset: 0.08em;
}
#Site {
color: red;
}
ul {
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
}
#SecondNav {
float: right;
font-family: ubuntu-medium;
font-weight: normal;
color: #414141;
padding: 0px 10px;
font-size: 15px;
margin-right: 11%;
}
#SecondMenu a:hover {
margin-bottom: 5px;
text-decoration-line: underline;
text-underline-position: above;
text-decoration-style: solid;
text-decoration-color: #414141;
text-decoration-thickness: 4px;
}
#SecondMenu li {
margin-bottom: 5px;
font-family: ubuntu-medium;
font-weight: normal;
color: #414141;
padding: 0px 10px;
display: inline;
font-size: 15px;
list-style-type: none;
}
#ContentDiv {
width: 70%;
height: 40%;
position: absolute;
top: 30%;
left: 15%;
transform: translateX(0%);
background-color: rgba(255, 0, 0, 0.4);
}
#ContentSection {
width: 90%;
height: 60%;
position: absolute;
top: 20%;
left: 5%;
background-color: rgba(255, 255, 255, 0.9);
}
#Content {
margin: 3%;
}
Use this
HTML code
<div class="menu">
A
B
C
D
E
F
</div>
CSS
.body {
background:#222;
padding:50px;
}
.menu {
margin:0 auto;
with 90%;
}
.menu a {
display:block;
float: left;
padding:5px 0;
color:#fff;
text-decoration:none;
margin:0 10px; font-family:arial;
}
.menu a:hover {
border-bottom:3px solid #fff;
}
Hope gonna help you, also i would be glad if you rate my comment good!
Using two lists and using border on the li you can get the color.
.navbar {
position: relative;
margin-bottom: 5px;
font-family: ubuntu-medium;
font-weight: normal;
}
.navbar a {
text-decoration: none;
color: #414141;
}
.navbar ul {
display: flex;
margin: 0;
padding: 0;
}
.navbar ul li {
display: block;
flex: 0 1 auto; /* Default */
list-style-type: none;
line-height: 2.5em;
margin-left: 1em;
}
.sub ul {
justify-content: flex-end;
}
.navbar::before{
position: absolute;
z-index: -1;
margin-top: 2.5em;
content: '';
border-top: 10px solid #FF0000;
width:100%;
}
.main li.active {
border-bottom: 10px solid #000000;
box-shadow: 0 4px 2px -2px #AAAAAA;
}
.sub li.active {
border-top: 10px solid #000000;
margin-top: -10px;
box-shadow: 0px -4px 2px -2px #AAAAAA;
}
<div class="navbar">
<nav class="main">
<ul>
<li>Home</li>
<li class="active">About</li>
<li>Contact</li>
</ul>
</nav>
<nav class="sub">
<ul>
<li class="active">Foo</li>
<li>Bar</li>
<li>Baz</li>
</ul>
</nav>
</div>
So I am still learning about css / html for Mobile devices. I have a site that when on desktop looks good. When you pull it up on mobile device the menu is gone. If you go into landscaping mode the menu will appear. Any help on why?
menu code.
<div class="menu_block ">
<div class="container_12">
<div class="grid_12">
<nav class="horizontal-nav full-width horizontalNav-notprocessed">
<ul class="sf-menu">
<li <img src="images/logo.png" alt="wake up rentals"></li>
<li class="current">Home</li>
<li>Rentals</li>
<li>Lakes</li>
<li>Rent Now</li>
<li>FAQ's</li>
<li>Login</li>
<li>Contact Us</li>
</ul>
</nav>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
Menu Block CSS
.menu_block {
z-index: 999;
position: relative;
background: url(../images/menu_bg.png) 0 0 repeat-x #d8d8db;
padding: 12px 0 11px;
}
.menu_block nav {
position: relative;
font-family: 'Marvel', sans-serif;
}
nav>.sf-menu {
z-index: 990;
text-align: center;
position: relative;
}
nav{ position:relative;padding: 0px 0 0 0;}
.sf-menu ul {position:absolute;top:-999px; display:none;/* left offset of submenus need to match (see below) */}
.sf-menu>li {
display: block;
position: relative;
display: inline-block;
font-size: 24px;
line-height: 20px;
}
.sf-menu>li>ul>li {
float: none;
position: static;
}
.sf-menu>li+li {
margin-left: 27px;
}
.sf-menu>li>a{
font-weight: bold;
text-align: center;
color: #313030;
display: block;
padding: 9px 25px;
}
.sf-menu>li.sfHover>a, .sf-menu>li.current>a, .sf-menu>li>a:hover {
color: #000;
background-color: blue;}
.sf-menu>li>a.sf-with-ul:after {
position: absolute;
content: '';
left: 50%;
margin-left: -3px;
width: 5px;
background: url(../images/arrows.png) 0 0 no-repeat;
height: 4px;
bottom: 10px;
pointer-events: none;
z-index: 999;
display: block;
}
.sf-menu>li>ul>li>a.sf-with-ul:after {
content: '';
font-family: 'FontAwesome';
position: absolute;
width: 5px;
font-size: 15px;
line-height: 13px;
font-weight: normal;
right: -15px;
color: #fff;
bottom: 3px;
pointer-events: none;
z-index: 999;
}
Mobile Menu Block
#media only screen and (max-width: 767px) {
.menu_block {
float: none !important;
padding: 20px 10px 25px !important;
clear: both;
min-height: 0px;
border: none;
}
.menu_block nav {
border: none !important;
float:none !important;
font:12px/15px Arial, Helvetica, sans-serif;
text-transform:uppercase;
color:#927c67;
margin: 0 auto;
padding-left: 0 !important;
}
header nav ul {
border: none;
}
.sf-menu {
display:none !important;
float: none;
}
#mm0 {
font:12px/15px Arial, Helvetica, sans-serif;
color:#202020;
width:100%;
margin: 0 auto;
float: none;
outline: none;
border:2px solid #fff;
}
}
I am not sure if you need more like the container_12 and grid_12 code. There was a lot of lines of code in them. And did not want to add a lot of not needed info . If you think they are needed I can post them.
Container_12 / some grid_12 CSS
https://pastebin.com/tup8Psis
Grid_12 CSS
https://pastebin.com/qxAswhVc
posted links to the css figured it was easier to read there...
You have your UL set to "Display None" at max-width 767px.
#media only screen and (max-width: 767px)
.sf-menu {
display: none !important;
/* float: none; */
That is why you do not have a menu, remove the "Display None" from your UL.
I am making a website using HTML and CSS and the heading displays fine in full screen but when I make it half the screen size the header (h1) changes to the default font and aligns to the left instead of the center as it should.
Here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<title>Home page</title>
<link type="text/css" rel="stylesheet"
href="css/filesheet1.css"/>
</head>
<body>
<nav>
<ul>
<li>Home page</li>
<li>About us</li>
<li>Our songs</li>
<li>See us play</li>
<li>Contact us</li>
<li>Merchandise</li>
<li>Playing a concert</li>
</ul>
</nav>
<h1>Home</h1>
</body>
</html>
Here is my CSS code (sorry if there's a lot as I have no idea whats causing this issue I have put it all there):
/* set sizing to border box method */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
/* set maximum and minimum widths for the body and centre within the viewport */
body {
text-align: center;
border: solid;
border-radius: 15px;
border-color: #CACFD2;
box-shadow: 0 0 100px 0 #888888;
background-color: #CACFD2;
font-family: 'Inconsolata', monospace;
margin-left: auto;
margin-right: auto;
max-width: 1024px;
min-width: 256px;
padding-top: 8px;
padding-bottom: 24px;
padding-left: 24px;
padding-right: 24px;
}
html, html body{
height: 100%;
}
html{
background-color: white;
}
/* header */
header{
}
header p {
float: left;
font-size: 16px;
font-weight: bold;
margin-top: 0px;
}
header h1 {
font-size: 16px;
text-align: center;
}
/* the menu */
nav ul {
text-align: center;
list-style-type: none;
background-color: none;
border: none;
font-family: 'Inconsolata', monospace;
font-weight: 400;
padding: 16px;
}
nav ul li {
display: inline;
border-right: 2px solid #111111;
padding-right: 8px;
padding-left: 8px;
}
nav ul li:last-child {
border-right: none;
}
nav ul li a {
text-decoration: none;
color: #111111;
}
nav li.selected{
color: #606060;
}
nav ul li a:hover {
font-weight: 900;
}
/* biographies */
section {
background-color: #FFFFFF;
margin-bottom: 24px;
min-height: 320px;
padding-left: 24px;
padding-right: 24px;
}
/* the aside */
aside {
}
/* footer */
footer {
}
footer p.copyright {
float: left;
margin-top: 0px;
}
footer p.contact {
text-align: right;
}
/* small images are set to 200px in height */
img.small {
float: left;
height: 200px;
margin-bottom: 24px;
margin-right: 24px;
}
/* medium images can be 50% of the container element’s width, up to 360px */
img.medium {
max-width: 360x;
width: 50%;
}
/* large images are 100% of the container element’s width */
img.large {
width: 100%;
}
/* add the same style of border to the elements which are to have borders */
section, img {
border: 2px solid #B1B1B1;
border-radius: 16px;
}
/* the bits that are specific to a wide viewport (over 56em) */
#media{
min-width: 900px
}
article {
float: left;
width: 66%;
}
aside {
float: left;
padding-left: 24px;
width: 34%;
}
footer {
clear: both;
}
h1{
text-align: center;
font-family: 'Inconsolata', monospace;
}
/* Styles go here */
/* set sizing to border box method */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
/* set maximum and minimum widths for the body and centre within the viewport */
body {
text-align: center;
border: solid;
border-radius: 15px;
border-color: #CACFD2;
box-shadow: 0 0 100px 0 #888888;
background-color: #CACFD2;
font-family: 'Inconsolata', monospace;
margin-left: auto;
margin-right: auto;
max-width: 1024px;
min-width: 256px;
padding-top: 8px;
padding-bottom: 24px;
padding-left: 24px;
padding-right: 24px;
}
html, html body{
height: 100%;
}
html{
background-color: white;
}
/* header */
header{
}
header p {
float: left;
font-size: 16px;
font-weight: bold;
margin-top: 0px;
}
header h1 {
font-size: 16px;
text-align: center;
}
/* the menu */
nav ul {
text-align: center;
list-style-type: none;
background-color: none;
border: none;
font-family: 'Inconsolata', monospace;
font-weight: 400;
padding: 16px;
}
nav ul li {
display: inline;
border-right: 2px solid #111111;
padding-right: 8px;
padding-left: 8px;
}
nav ul li:last-child {
border-right: none;
}
nav ul li a {
text-decoration: none;
color: #111111;
}
nav li.selected{
color: #606060;
}
nav ul li a:hover {
font-weight: 900;
}
/* biographies */
section {
background-color: #FFFFFF;
margin-bottom: 24px;
min-height: 320px;
padding-left: 24px;
padding-right: 24px;
}
/* the aside */
aside {
}
/* footer */
footer {
}
footer p.copyright {
float: left;
margin-top: 0px;
}
footer p.contact {
text-align: right;
}
/* small images are set to 200px in height */
img.small {
float: left;
height: 200px;
margin-bottom: 24px;
margin-right: 24px;
}
/* medium images can be 50% of the container element’s width, up to 360px */
img.medium {
max-width: 360px;
width: 50%;
}
/* large images are 100% of the container element’s width */
img.large {
width: 100%;
}
/* add the same style of border to the elements which are to have borders */
section, img {
border: 2px solid #B1B1B1;
border-radius: 16px;
}
/* the bits that are specific to a wide viewport (over 56em) */
#media all and (min-width: 900px) {
}
article {
float: left;
width: 66%;
}
aside {
float: left;
padding-left: 24px;
width: 34%;
}
footer {
clear: both;
}
h1{
text-align: center;
font-family: 'Inconsolata', monospace;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<title>Home page</title>
<link type="text/css" rel="stylesheet"
href="style.css"/>
</head>
<body>
<nav>
<ul>
<li>Home page</li>
<li>About us</li>
<li>Our songs</li>
<li>See us play</li>
<li>Contact us</li>
<li>Merchandise</li>
<li>Playing a concert</li>
</ul>
</nav>
<h1>Home</h1>
</body>
</html>
This should work for you now.
I can't seem to figure out how to remove this space to left of the image, as well as the small space in between the images on the right. I've tried various things, but nothing has worked. Here is the HTML for the nav:
<!DOCTYPE html>
<html lang="en">
<head>
<title>A Dog's Life</title>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<header>
<img src="images/navimg.png" class="navbarimg">
<img src="images/banner.jpg" style="width:100%">
</header>
<nav>
<ul>
<li><img src="images/home-nav.png" alt="Home"></li>
<li><img src="images/about-nav.png" alt="About"></li>
<li><img src="images/services-nav.png" alt="Services"></li>
<li><img src="images/gallery-nav.png" alt="Gallery"></li>
<li><img src="images/contact-nav.png" alt="Contact"></li>
</ul>
</nav>
And the CSS:
body { background-color: #abc67e;
color: #666666;
font-family:Tahoma;
height: 100%;
}
header { background-color: #ffe4b5;
color: #FFFFFF;
font-family: Tahoma;
margin-bottom: 0;
z-index: 2;
}
h1 { line-height: 200%;
background-image: url(sunset.jpg);
background-repeat: no-repeat;
background-position: right;
padding-left: 20px;
height: 72px;
margin-bottom: 0;
}
nav { font-weight: bold;
background-color: #deb887;
z-index: 1;
}
h2 { font-family: Tahoma;
}
dt { color: #000033;
font-weight: bold;
}
footer { font-size: 0.70em;
text-align: center;
font-style: italic;
padding: 10px;
}
h3 { color: #000033;
}
main { padding-left: 20px;
padding-right: 20px;
}
#wrapper { margin-left: auto;
margin-right: auto;
width: 55%;
background-color: #fdf5e6;
min-width: auto;
box-shadow: 5px 5px 5px #523411;
height: 100%;
border: 4px;
border-style: outset;
}
nav ul { list-style-type: none;
margin-top: 0;
z-index: 99;}
nav li { display: inline; }
footer ul { list-style-type: none; }
footer li { display: inline; }
footer a { text-decoration: none; padding-right: 10px; }
aside { float: right;
border-left: 1px;
border-left-style: dotted;
padding-left: 50px;}
aside img { width: 100%;
height: 100%;}
section { float: right;
width: 320px;}
.galleryul { list-style-type: none; }
.galleryli { display: inline-block;
width: 225px;
padding-bottom: 10px;
margin: 10px;
background-color: #EAEAEA;
text-align: center;
font-style: italic;
font-family: Tahoma; }
label { float: left;
display: block;
width: 8em;
padding-right: 25px;
}
input { display: block;
margin-bottom: 1em;
}
textarea { display: block;
margin-bottom: 1em;
}
#mySubmit { margin-left: 11.5em;
}
.navbarimg { position: absolute;
padding-left: 650px;
padding-top: 110px;
z-index: -1;}
Thanks
<ul> element has by default padding-left, so you need to remove it with:
nav ul {
padding-left: 0;
}
Then the space between each image is because you have each <li> on a separate line and <li> has display: inline set, therefore browser adds a space between them. You can force it to make no spaces with float: left:
nav li {
float: left;
}
Now the <ul> wrapper needs to know that it should cover the entire content including floating elements so you can set it overflow: auto.
nav ul {
overflow: auto;
}
See updated jsfiddle: https://jsfiddle.net/f1s11mxp/
Add to your nav ul a padding-left of 0:
nav ul {
// other styles
padding-left: 0;
// other styles
}
And the trick I often have to resort to to get rid of space between inline or inline-block elements is to 'comment out' as it were the white space in the HTML markup like so:
<nav>
<ul>
<li><img src="images/home-nav.png" alt="Home"></li><!--
--><li><img src="images/about-nav.png" alt="About"></li><!--
--><li><img src="images/services-nav.png" alt="Services"></li><!--
--><li><img src="images/gallery-nav.png" alt="Gallery"></li><!--
--><li><img src="images/contact-nav.png" alt="Contact"></li>
</ul>
</nav>