My dropdown menu is not clickable. Like if I want to go to a different page, it wont let me click it. Can someone please help me on what to do here?
This is my htm and css
`<h2>Laura Deleon</h2>
</div>
<ul class="nav-links">
<li>Photography</li>
<li>Films</li>
<li>About</li>
<li>Contact</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="app.js"></script>
<div class="carousel-container">
<figure class="carousel-slide snaps-inline">
<img src="images/IMG_7068.jpg">
<img src="images/IMG_7067.jpg">
<img src="images/IMG_7069.jpg">
<img src="images/IMG_7070.jpg">
<img src="images/IMG_7072.jpg">
<img src="images/IMG_3123 (1).jpg">
<img src="images/IMG_3124.jpg">
<img src="images/IMG_3125 (1).jpg">
<img src="images/IMG_3572.jpg">
<img src="images/IMG_3128.jpg">
<img src="images/IMG_3126 (1).jpg">
<img src="images/IMG_2650 (1).jpg">
<img src="images/img5.jpg">
<img src="images/img3.jpg.jpg">
<img src="images/img13.jpg.jpg">
<img src="images/img18.jpg.jpg">
<img src="images/img9.jpg">
<img src="images/img1.jpg">
<img src="images/IMG_1382.jpg">
<img src="images/img19.jpg">
</figure>
`
I made put the dropdown to go over the pictures to see if that worked but nothing.The dropdown is for when the page is shrinked and for mobile. I tried it on my phone and I cant click on the other pages
`/*start navbar*/
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 10vh;
}
.nav-links {
display: flex;
width: 40%;
justify-content: space-around;
}
.nav-links li{
list-style: none;
background-color: rgba(255, 255, 255, 0.5);
}
.nav-links a{
list-style: none;
text-transform: none;
letter-spacing: 3px;
line-height: 25pt;
}
/*end navbar*/
/*start burger*/
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 1px;
background-color: black;
margin: 5px;
transition: 0.3s ease;
}
#media screen and (max-width: 1024px) {
.nav-links {
width: 55%;
}
}
#media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 95vh;
top: 8vh;
display: inline-block;
flex-direction: column;
justify-content: center;
width: 20%;
transform: translateX(0px);
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0
}
.burger {
display: block;
}
#fas1,
#fas2 {
display: none;
}
}
.nav-active {
transform: translateX(0%);
}
#keyframes navLinkFade{
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
/*end burger*/
/*start picture carousel home*/
img {
width: 700px;
height: 700px;
object-fit: contain;
margin: 10px;
z-index: -1;
}
.carousel-slide {
display: grid;
gap: var(--size-3);
grid-auto-flow: column;
overflow-x: auto;
overscroll-behavior-inline: contain;
position: relative;
}`
I'm new to Vue, this is my first time using it instead of just regular old HTML or CSS with some Javascript thrown in.
How do I format it so that it adjusts to the size of the screen it's being displayed on? My media queries don't seem to be doing anything.
<template>
<div id="app">
<Home msg="AutoSentinel"/>
</div>
</template>
<script>
import Home from './components/Homepage.vue'
export default {
name: 'app',
components: {
Home
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: black;
text-decoration: none;
}
body{
margin:0px;
}
</style>
<template>
<div class="Home">
<div class="top-bar">
<h1>{{ msg }}</h1>
<div class="nav-bar">
<button #click="$router.push('about')">Home</button>
<button #click="$router.push('about')">Drowsiness</button>
<button #click="$router.push('about')">SOS</button>
<button #click="$router.push('about')">Map</button>
<button #click="$router.push('about')">Drivers</button>
<button #click="$router.push('about')">Data</button>
</div>
</div>
<div class="main-page">
<div class="greeting-wrapper">
<p class="p1">
Welcome to AutoSentinel
</p><br>
<p class="p2">
Where driving meets safety
</p>
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2964.9888949227957!2d-87.81797538455504!3d42.0005138792127!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x880fb63b7755aae1%3A0x4a77c1865fe64ca0!2sPanoskin!5e0!3m2!1sen!2sus!4v1608611108029!5m2!1sen!2sus" width="650" height="350" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
</div>
<div class="driver-photo">
<img src="../assets/MicrosoftTeams-image.png" width="300px" height="600px">
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Home',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.top-bar{
height: 200px;
background-color: #8b1be6;
color: black;
box-shadow: -6px 0 white, 6px 0 white, 0 7px 5px -2px #d4d3d3;
}
h1{
font-size: 90px;
font-weight: bold;
display: flex;
justify-content: space-evenly;
align-items: center;
margin: 0px;
letter-spacing: 0.3em;
}
.nav-bar{
margin-top: 38px;
display: flex;
justify-content: space-evenly;
}
.main-page{
font-size: 40px;
display: flex;
justify-content: space-between;
padding: 15px;
background-image: url("../assets/backgroundline.png");
background-repeat: no-repeat;
background-size: 100%;
}
.map{
padding-top: 30px;
padding-left: 15px;
}
.p1 {
margin-left: 20px
}
.p2 {
margin-top: -40px;
margin-left: 105px;
}
button {
background-color: white;
border: none;
border-radius: 25px;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-weight: bold;
margin-bottom: 30px;
outline: none;
cursor: pointer;
}
.driver-photo {
padding-right: 70px;
padding-top: 30px;
}
</style>
Added code, sorry for forgetting that. I was trying to use a media query in this (not sure if I'm using Vue completely correctly here, either). Is there a way to make it dynamically adjust to the screen size?
Use media queries
You said media queries isn't working but from your code you aren't even using it.
You can read us on media queries here
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
The fact that you are using vue.js doesn't change how you're would implement media queries. Just use it the regular way you would in a regular HTML and CSS environment.
I'm having an issue with my jumbotron not scaling properly when i'm trying to test my website. My height changes every time I adjust the size of the browser, which cause it to show the white space. Is there a way to set the height for the jumbotron without showing the white space?
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Mobile Specific Metas
================================================== -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>The Portfolio of Jason Murray</title>
<!-- Bootstrap CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Font awesome css file-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- Default Theme css file -->
<link id="orginal" href="css/default-theme.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/style.css" rel="stylesheet">
<!-- Google fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Varela' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--=========== HEADER SECTION ================-->
<header id="header">
<!-- BEGIN MENU -->
<div class="menu_area">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<!-- FOR MOBILE VIEW COLLAPSED BUTTON -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- LOGO -->
<a class="navbar-brand" href="index.html">Jason<span>Murray</span></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul id="top-menu" class="nav navbar-nav navbar-right main_nav">
<li class="active">Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
</div><!-- END MENU -->
</header>
<!--=========== END HEADER SECTION ================-->
<!--=========== MAIN CONTENT SECTION ================-->
<div class="jumbotron">
<div class="container">
<div class="image_opacity"></div>
<div class="caption">
<h2>Front-End</h2>
<h2>Web Developer</h2>
<p>Hi, I'm Jason Murray and I have a passion for building simplistic websites.</p>
Recent Work
</div>
</div>
</div>
<!--=========== END MAIN CONTENT SECTION ================-->
<!--=========== FOOTER SECTION================-->
<footer id="footer">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="footer_left">
<p>© 2015 Jason Murray Web Design. All Rights Reserved</p>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="footer_right">
<ul class="social_nav">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-linkedin"></i></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
<!--=========== END FOOTER SECTION================-->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS:
body,html{
overflow-x:hidden;
}
html{
height: 100%;
}
body {
font-family: 'Open Sans', sans-serif;
overflow-x: hidden !important;
}
ul{
padding: 0;
margin: 0;
list-style: none;
}
a{
text-decoration: none;
color: #2f2f2f;
}
a:focus{
outline: none;
text-decoration: none;
}
h1,h2{
font-family: 'Montserrat', sans-serif;
}
h3,h4,h5,h6{
font-family: 'Varela', sans-serif;
}
h2 {
color: #313338;
font-size: 72px;
font-weight: 700;
line-height: 57px;
margin: 0;
padding-bottom: 10px;
text-transform: uppercase;
}
img{
border:none;
}
/*--------------------*/
/* HEADER */
/*--------------------*/
#header{
float: left;
display: inline;
width: 100%;
position: relative;
}
/*--------.menu_area-------- */
.menu_area{
position: absolute;
left:0;
right: 0;
top: 0;
}
.navbar-default {
background-color: #000000;
border-color: transparent;
padding: 12px 0px;
}
.past-main {
background-color: rgba(0,0,0,0.8);
margin-top: 0px;
padding:6px 0px;
-webkit-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
}
#navbar{overflow-x: hidden;}
.navbar-brand {
color: #fff !important;
font-size: 20px;
font-weight: bolder;
font-family: 'Varela', sans-serif;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
background-color: transparent;
}
.navbar-default .navbar-nav > li > a {
color: #fff;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
}
.navbar-default .navbar-nav > li > a:hover{
text-transform: uppercase;
color: #2da2c8;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
background-color: transparent;
color: #2da2c8;
}
.navbar-brand > span {
color: #2da2c8;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #2da2c8;
}
/*---------------------*/
/* MAIN CONTENT - HOME */
/*---------------------*/
.jumbotron {
background: url("../img/lucho-49.jpg") no-repeat center center;
-webkit-background-size: 100% 100%
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
margin-top: 75px;
height: 305px;
}
.image_opacity{
background: none repeat scroll 0 0 #242434;
margin-top: 75px;
opacity: 0.8;
position: absolute;
right: 0;
top: 0;
width: 100%;
height: 305px;
z-index: 9;
}
.caption {
margin-top: 17%;
padding: 5px 0;
position: relative;
text-align: center;
z-index: 999;
}
.caption > h2 {
color: #ffffff;
font-size: 18px;
font-weight: 700;
line-height: 12px;
margin: 0 auto 10px;
padding-bottom: 8px;
text-align: center;
text-transform: uppercase;
width: 90%;
}
.caption>p{
color: #ffffff;
font-size: 12px;
}
.caption_btn{
padding: 10px 15px;
border: 2px solid #fff;
color: #fff;
font-size: 12px;
display: inline-block;
text-transform: uppercase;
}
.caption_btn:hover,.caption_btn:focus{
border-color:#2da2c8;
color: #2da2c8;
text-decoration: none;
}
/*----------------------*/
/* MAIN CONTENT - ABOUT */
/*----------------------*/
#about {
display: inline;
float: left;
width: 100%;
padding: 80px 0px;
}
.about_area{
float: left;
display: inline;
margin-bottom: 140px;
width: 100%;
min-height: 200px;
}
.heading{
float: left;
display: inline;
width: 100%;
}
.heading h2 {
display: inline-block;
margin-bottom: 35px;
margin-top: 65px;
padding-bottom: 15px;
padding-right: 50px;
font-size: 40px;
line-height: 40px;
}
.heading p{
font-size: 16px;
line-height: 28px;
font-weight: 300;
}
.about_content{
float: left;
display: inline;
width: 100%;
padding: 50px 0px;
}
.about_featured{
float: left;
display: inline;
width: 100%;
}
.panel-group .panel {
border-radius: 0;
margin-bottom: 0px;
box-shadow: none;
}
.panel-group .panel + .panel {
margin-top: 0;
}
.panel-default {
border-color: transparent;
}
.panel-default > .panel-heading {
background-color: transparent;
color: #333;
border: 0 none !important;
padding: 5px 15px;
}
.panel-title {
border-bottom: 1px solid #ccc;
color: #222;
font-family: 'Varela', sans-serif;
font-size: 20px;
font-weight: 400;
text-transform: uppercase;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.panel-title a {
display: block;
text-decoration: none;
padding-bottom: 10px;
}
.panel-default .in{
padding-left:10px;
margin-left: 20px;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.panel-title a span{
margin-right: 5px;
}
.panel-body {
border-top-color: transparent !important;
padding: 0px 15px;
margin: 10px 0px;
}
.about_slider{
float: left;
display: inline;
width: 100%;
height: 350px;
}
.single_iteam{
float: left;
display: inline;
width: 100%;
height:100%;
}
.single_iteam img {
max-width: 100%;
}
.about_slider .slick-dots li button:before {
content: "•";
font-size: 28px;
}
.about_slider .slick-dots li.slick-active button:before {
opacity: 0.75;
}
.skills_area{
background-color: #fff
float: left;
display: inline;
width: 100%;
min-height: 350px;
padding: 85px 0px;
position: relative;
}
.skills{
position: relative;
z-index: 999;
}
.heading h3 {
color: #000;
display: inline-block;
float: left;
font-size: 40px;
margin: 0 0 40px;
padding-bottom: 10px;
text-transform: uppercase;
font-weight: bold;
line-height: 40px;
}
div[data-dimension] {
float: none;
margin: 0 auto;
}
.circle-text{
color: #000;
}
.single_skill{
float: left;
display: block;
width: 100%;
text-align: center;
}
.single_skill > h4 {
color: #000000;
font-size: 20px;
font-weight: bold;
}
/*--------------------------*/
/* MAIN CONTENT - PORTFOLIO */
/*--------------------------*/
/*------------------------*/
/* MAIN CONTENT - CONTACT */
/*------------------------*/
/*--------------------*/
/* FOOTER */
/*--------------------*/
#footer{
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
background-color: #000;
}
.footer_left{
float: left;
display: inline;
width: 100%;
}
.footer_left > p {
font-size: 12px;
text-align: center;
color: #ffffff;
margin-bottom: 5px;
margin-top: 5px;
}
.footer_left > p a {
font-weight: bold;
}
.footer_right{
float: left;
display: inline;
width: 100%;
}
.social_nav{
text-align: center;
}
.social_nav li{
display: inline-block;
}
.social_nav li a {
border: 1px solid #fff;
color: #ffffff;
display: inline-block;
font-size: 18px;
height: 30px;
margin-left: 5px;
text-align: center;
width: 35px;
line-height: 28px;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.social_nav li a:hover{
color: #2da2c8;
border-color: #2da2c8;
}
/*----------------------------------*/
/* RESPONSIVE STYLE - MEDIA QUERIES */
/*----------------------------------*/
/* Landscape phones and portrait tablets */
#media(min-width: 481px) and (max-width: 767px) {
.navbar-brand {color: #fff !important;font-size: 26px;font-weight: bolder;font-family: 'Varela', sans-serif;}
.navbar-default .navbar-nav > li > a {font-size: 12px;}
.jumbotron {background: url("../img/lucho-49.jpg") no-repeat center center;-webkit-background-size: 100% 100%;-moz-background-size: 100% 100%;-o-background-size: 100% 100%;background-size: 100% 100%;height: 592px;}
.image_opacity{background: none repeat scroll 0 0 #242434;margin-top: 75px;height: 592px;opacity: 0.8;width: 100%;}
.caption {margin-top: 40%;position: relative;text-align: center;z-index: 999;}
.caption > h2 {color: #ffffff;font-size: 25px;font-weight: 700;line-height: 20px;margin: 0 auto 10px;padding-bottom: 8px;text-align: center;text-transform: uppercase;width: 90%;}
.caption> p {color: #ffffff;font-size: 14px;}
.caption_btn{padding: 10px 15px;border: 2px solid #fff;color: #fff;font-size: 14px;display: inline-block;text-transform: uppercase;}
.caption_btn:hover,.caption_btn:focus {border-color:#2da2c8;color: #2da2c8;text-decoration: none;}
#footer{padding: 24px;}
#footer > .container > .row {margin-right: auto;}
.footer_left > p {font-size: 12px;text-align: center;}
.social_nav{text-align: center;}
}
/* Portrait tablets and small desktops */
#media(min-width: 768px) and (max-width: 991px) {
.navbar-brand {color: #fff !important;font-size: 30px;font-weight: bolder;font-family: 'Varela', sans-serif;}
.navbar-default .navbar-nav > li > a {font-size: 13px;}
.jumbotron {background: url("../img/lucho-49.jpg") no-repeat center center;-webkit-background-size: 100% 100%;-moz-background-size: 100% 100%;-o-background-size: 100% 100%;background-size: 100% 100%;height: 816px;}
.image_opacity{background: none repeat scroll 0 0 #242434;margin-top: 75px;height: 816px;opacity: 0.8;width: 100%;}
.caption {margin-top: 28%;position: relative;text-align: center;z-index: 999;}
.caption > h2 {color: #ffffff;font-size: 45px;font-weight: 700;line-height: 56px;margin: 0 auto 10px;padding-bottom: 8px;text-align: center;text-transform: uppercase;width: 90%;}
.caption> p {color: #ffffff;font-size: 18px;}
.caption_btn{padding: 10px 15px;border: 2px solid #fff;color: #fff;font-size: 18px;display: inline-block;text-transform: uppercase;}
.caption_btn:hover,.caption_btn:focus {border-color:#2da2c8;color: #2da2c8;text-decoration: none;}
#footer{padding: 35px;}
#footer > .container {margin-left:-15px;margin-right:-15px;}
.footer_left > p {font-size: 13px;text-align: left;}
#footer .row {margin-left: -26px;}
.social_nav{text-align: right;margin-right: 12px;}
}
/* Landscape tablets and medium desktops */
#media (min-width: 992px) and (max-width: 1199px) {
.navbar-brand {color: #fff !important;font-size: 33px;font-weight: bolder;font-family: 'Varela', sans-serif;}
.container > .navbar-header {margin-left:8px;}
.navbar-default .navbar-nav > li > a {font-size: 14px;}
.navbar-right {margin-right:0px;}
.jumbotron {background: url("../img/lucho-49.jpg") no-repeat center center;-webkit-background-size: 100% 100%;-moz-background-size: 100% 100%;-o-background-size: 100% 100%;background-size: 100% 100%;height: 1024px;}
.image_opacity{background: none repeat scroll 0 0 #242434;margin-top: 75px;height: 1024px;opacity: 0.8;width: 100%;}
.caption {margin-top: 32%;position: relative;text-align: center;z-index: 999;}
.caption > h2 {color: #ffffff;font-size: 55px;font-weight: 700;line-height: 66px;margin: 0 auto 10px;padding-bottom: 8px;text-align: center;text-transform: uppercase;width: 90%;}
.caption> p {color: #ffffff;font-size: 19px;}
.caption_btn{padding: 10px 15px;border: 2px solid #fff;color: #fff;font-size: 18px;display: inline-block;text-transform: uppercase;}
.caption_btn:hover,.caption_btn:focus {border-color:#2da2c8;color: #2da2c8;text-decoration: none;}
#footer{padding: 35px;}
#footer > .container {margin-left:-15px;margin-right:-15px;}
.footer_left > p {font-size: 14px;text-align: left;}
.social_nav{text-align: right;margin-right: 18px;}
}
/* Large desktops and laptops */
#media(min-width: 1200px) {
.navbar-brand {color: #fff !important;font-size: 35px;font-weight: bolder;font-family: 'Varela', sans-serif;}
.navbar-default .navbar-nav > li > a {font-size: 15px;}
.jumbotron {background: url("../img/lucho-49.jpg") no-repeat center center;-webkit-background-size: 100% 100%;-moz-background-size: 100% 100%;-o-background-size: 100% 100%;background-size: 100% 100%;height: 740px;}
.image_opacity {background: none repeat scroll 0 0 #242434;margin-top: 75px;height: 740px;opacity: 0.8;width: 100%;}
.caption {margin-top: 10%;position: relative;text-align: center;z-index: 999;}
.caption > h2 {color: #ffffff;font-size: 65px;font-weight: 700;line-height: 76px;margin: 0 auto 10px;padding-bottom: 8px;text-align: center;text-transform: uppercase;width: 90%;}
.caption > p {color: #ffffff;font-size: 20px;}
.caption_btn {padding: 10px 15px;border: 2px solid #fff;color: #fff;font-size: 20px;display: inline-block;text-transform: uppercase;}
.caption_btn:hover,.caption_btn:focus {border-color:#2da2c8;color: #2da2c8;text-decoration: none;}
#footer{padding: 35px;}
.footer_left > p {font-size: 15px;text-align: left;}
.social_nav{text-align: right;}
}
I'd go for a different approach. The problem is, you've got fixed heights on your jumbotron and your image_opacity. A far more easy approach is putting a faux-gradient on the jumbotron, like this:
.jumbotron {
background-image:
linear-gradient(rgba(249, 249, 249, 0.9), rgba(249, 249, 249, 0.9)),
url("../img/lucho-49.jpg") no-repeat center center;
background-size: 100% auto;
margin-top: 75px;
height: 400px;
position: relative;
}
And then you don't need the image_opacity. Oh and I didn't check this thoroughly, but -webkit-, -moz-, and -o-background-size are imho non-existent.
Edit 2: set the parent div and the jumbotron to a height of 100% (in this case, that's body):
html, body {
height: 100%;
}
.jumbotron {
background-image:
linear-gradient(rgba(249, 249, 249, 0.9), rgba(249, 249, 249, 0.9)),
url("../img/lucho-49.jpg") no-repeat center center;
background-size: 100% 100%;
margin-bottom: 0px;
height: 100%;
}
Bootply (in this example the page is wrapped in a #wrap element, so this has to be height:100%;, too.)
This should do the trick. Try to put !important after the properties if it's not working immediately.
How can I remove the gap between the navigation and the header? ALso between the nav and the main content?
Navigation buttons i.e. ul are in their perfect place. but black navigation bar is causing me lots of unnecessary troubles! I am unable to fix it!
here is my html
<div id="header">
<div id="header-container">
Logo goes here!!
</div>
</div>
<div class="nav">
<div class="nav-container">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Browse</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</div>
<div class="main-body">
<h1>Contant here!</h1>
</div>
here is my css code:
{
margin: 0;
padding: 0;
}
.clear{
clear: both;
}
body{
margin: 0 auto;
background: #cccccc;
}
#header{
background: #FF9900;
height: 160px;
width: 100%;
}
#header-container{
width: 960px;
height: 160px;
margin: 0px auto 0px auto;
}
.nav{
width: 100%;
height: 70px;
background: #000000;
margin-top: 0px;
margin-bottom: 0px;
}
.nav .nav-container{
width: 960px;
height: 62px;
margin: auto;
margin-top: 5px;
}
.nav .nav-container ul{
margin-top: 0px;
padding-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
}
.nav .nav-container ul li{
display: inline-block;
padding: 0px;
border-radius: 10px;
margin-right: 20px;
margin-left: 7px;
background: #000000;
}
.nav .nav-container ul li a{
color: #FF9900;
text-decoration: none;
font-weight: bold;
font-size: 22px;
display: inline-block;
width:150px;
text-align: center;
height: 58px;
line-height: 250%;
}
.nav .nav-container ul li a:hover{
background:#FF9900;
color: white;
border-radius: 10px;
}
.main-body{
width: 960px;
background: white;
margin:auto;
margin-top: 0px;
}
Change margin-top: 5px; to margin-top: 0; in .nav .nav-container.
.nav .nav-container{
width: 960px;
height: 62px;
margin: auto;
/* margin-top: 5px; becomes */ margin-top: 0;
}
Demo: http://jsfiddle.net/ue65t3gh/
The problem is when I make the browser window smaller, the menu breaks. How can I prevent this from happening (I am new to this!)? It would be helpful to point out errors in my code or what needs to be changed.
Here is my css code:
ul {
margin: 0px;
padding: 0px;
list-style-type: none;
list-style-image: none;
list-style-position: outside;
overflow: visible;
position: static;
}
ul li {
border: 1px solid #000000;
display: block;
position: relative;
float: left;
right: -4px;
background-color: white;
}
li ul {
display: none;
background-color: #3333ff;
}
ul li a {
padding: 10px 18px 5px 90px;
background: #3333ff none repeat scroll 0% 50%;
text-decoration: none;
white-space: nowrap;
color: #ffffff;
overflow: visible;
text-align: center;
display: block;
}
ul li a:hover {
background: #3366ff none repeat scroll 0% 50%;
overflow: visible;
}
li:hover ul {
display: block;
position: absolute;
overflow: visible;
}
li:hover li {
float: none;
background-color: #3366ff;
}
li:hover a {
background: #2346b1 none repeat scroll 0% 50%;
}
li:hover li a:hover {
background: #40a3f6 none repeat scroll 0% 50%;
}
#drop-nav li ul li {
border-top: 0px none;
overflow: visible;
visibility: visible;
width: 140px;
font-family: Arial, Helvetica, sans-serif;
display: table-row-group;
text-align: left;
}
Here is my html code:
<ul id="drop-nav">
<li>Home</li>
<li>About
<ul>
<li>Methods</li>
<li>Strategies</li>
<li>Phoneme Images</li>
<li>Alphabet Images</li>
</ul>
</li>
<li>Reading By The Rules
<ul>
<li>Joomla nbsp;</li>
<li>Drupal </li>
<li>Phoneme Images </li>
</ul>
</li>
<li>Products</li>
<li>Contact</li>
</ul>
Without trying to change your existing CSS, a simple fix will be to assign a fixed width to your #drop-nav. On re-sizing the browser, your content will become scrollable.
Live demo on fiddle.