xD thank you I will give this a go I love ur little commenting out comments haha I was messing around trying to make all the boxes the same size, and fixed it, but forgot to remove the min-width xD
So I gave it a go and am still having issues haha i don’t know if it is my version of chrome or something else in say boostraps js or lightbox that is conflicting with it? here is my code now and it is still not working for me xD
i am still using bootstrap further down the page on other sections, could this be conflicting it? first time ever having this problem xD.
I am also having issues on my home page now with my hero image and section xD I think my media queries are doing some damage there though hahaha
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Professional rendering, texture coating and solid plastering services || Elliot Solid Plastering</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<script src="js/bootstrap.js" rel="text/javascript"></script>
<link href="css/lightbox.css" rel="stylesheet">
<!--Stylsheet-->
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link href="css/media.css" rel="stylesheet" type="text/css">
<link href="css/font-awesome.css" rel="stylesheet" type="text/css">
<!--Fonts-->
<!--SEO MetaData-->
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<ul id="primary-nav">
<li><a href="index.html" class="home">Home</a></li>
<li><a href="photos.html" class="photos">Photos</a></li>
<li><a href="contact.html" class="contact">Contact</a></li>
</ul>
<section>
<div class="photo-logo">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-12 col-xl-12" id="logo-div">
<!-- logo -->
<a href="index.html"><img src="img/bichenos.png" alt="Logo" class="logo"></a>
</div>
</div>
</div>
</div>
</section>
<section id="photo-gallery">
<div class="container">
<h1> Photo Gallery </h1>
<div class="gallery">
<div class="row">
<div class="col-lg-3">
<a href="img/1.jpg" data-title="Glass Bottom Boat & Governors Island" data-lightbox="Tours">
<img src="img/1.jpg" width="200px" alt="Glass Bottom Boat & Governors Island" class="img-rounded"/>
</a>
</div>
<div class="col-lg-3">
<a href="img/2.jpg" data-title="Bicheno's Glass Bottom Boat & Governors Island" data-lightbox="Tours">
<img src="img/2.jpg" width="200px" alt="Bicheno's Glass Bottom Boat" class="img-rounded"/>
</a>
</div><div class="col-lg-3">
<a href="img/3.jpg" data-title="On the glass bottom boat, facing south from The Gulch" data-lightbox="Tours">
<img src="img/3.jpg" width="200px" alt="On the glass bottom boat, facing south from The Gulch" class="img-rounded"/>
</a>
</div><div class="col-lg-3">
<a href="img/4.jpg" data-title="Photo of Governors Island" data-lightbox="Tours">
<img src="img/4.jpg" width="200px" alt="Photo of Governors Island" class="img-rounded"/>
</a>
</div>
</div>
</div>
</div>
</section>
<section class="footer">
<div class="container">
<div class="row">
<div class="col-xs-2">
<img src="img/7msdbytif_poster.png" alt="Accredited Tourism Business Australia Logo" class="footer-logo"/>
</div>
<div class="col-xs-2">
<a class="tourism-link" href="http://www.qualitytourismaustralia.com/"><!-- content --><p>An Australian Accredited Tourism Business</p></a>
</div>
<div class="col-xs-2">
<a href="https://www.facebook.com/BichenoGlassBottomBoat"><!-- image --><img src="img/facebook.png" alt="Facebook Icon" class="fb-icon social"/></a>
</div>
<div class="col-xs-2">
<a href="https://www.instagram.com/bichenoglassbottomboat/"><!-- image --><img src="img/twitter.png" alt="Twitter Icon" class="twitter-icon social"/></a>
</div>
<div class="col-xs-4">
<a class="pixel-pixie-logo" href="http://pixelpixieproductions.com/"><!-- content --><p>Website by</p><p>Pixel Pixie Productions</p></a>
</div>
</div>
</div>
</section>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/main.js" type="text/javascript"></script>
<script src="js/lightbox.min.js"></script>
</body>
</html>
CSS
#container {
clear: both;
margin-left: auto;
margin-right: auto;
}
body {
background: #1C508C;
}
h1 {
font-size: 26px;
font-family: 'Sue Ellen Francisco', sans-serif;
}
/*Primary Navigation*/
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
#primary-nav {
list-style: none;
text-align: center;
margin: 0;
padding: 0;
padding-top: 40px;
width: 100%;
}
#primary-nav li {
display: inline-block;
font-size: 18px;
font-family: Helvetica, 'Helvetica Neue', Arial, sans-serif;
color: #fff;
padding: 20px 10px;
text-align: center;
}
#primary-nav li a {
line-height: 20px;
color: #fff;
padding: 20px 40px;
min-width: 150px;
max-width: 250px;/* add display block for this to work*/
display: block;
border: 1px solid black;
background-color: rgba(0, 0, 0, 0.1)
}
#primary-nav li a:link {
}
#primary-nav li a:visited {
}
#primary-nav li a:hover {
text-decoration: none;
border: 1px solid skyblue;
}
#primary-nav li a:active {
background-color: rgba(0, 0, 0, 0.3)
}
ul#primary-nav {
padding-left: 0;
}
is it something else if I want it to be set like so the active page has the background active, e.g. it’s on the home page the home link has the background color? how would I best put it up somewhere for you to view without hosting xD?
and yea I used the hyperlink to see if it made a difference and that was working what you are doing say if you drag it off it stays active, does it behave a little different when it’s live or do I need to use javascript for what I am trying to achieve? xD
That is the behavior of pseudo :active it’s only active for that brief moment that the mouse is down.
That’s why I had to drag off of it to keep it on.
I believe that’s what your looking for.
I’m not sure it would do any good though, as soon as you click the link you should be on your way to that page.
Are you sure your not wanting the BG color to change on :hover
yea nah my hovers are fine xD yea i just want it say like when i go to the site when it’s live the home page has a background color and the same for photos and contact like no color on the other 2 while 1 is active unless hovering which is a darker color =) thanks for that my active state has probably been working fine this whole time then xD
http://bichenoglassbottomboat.com/contact.html this is a muse version that I was rebuilding from scratch because I don’t like their structure and the breakpoints are annoying xD but it has the active sort of thing going on that I am looking for, I just can’t figure out how to replicate it xD
Then you will use a descendant combinator selector for that page in the CSS
.home #nav li a#home,
.about #nav li a#about,
.contact #nav li a#contact {
background:#FF9740; /*Highlight Current Page with classes on the body element*/
text-shadow:none;
}
