I am in middle of developing a website and I am facing a small problem. The top navigation bar of the website works fine upto a particular screen resolution. However, if I adjust my browser window (smaller in size), the navigation bar is getting disappeared. The same problem also persist if I view the website on my Ipad. I am not able to figure out what am I doing wrong with the CSS code for navigation menu.
I have uploaded the website on a testing server
http://bcklight.hostoi.com/
HTML Code
<section id="start" class="start">
<div id="section-nav" class="section-nav">
<div class="container">
<ul class="nav">
<li>Home</li>
<li>Product&Services</li>
<li>Work</li>
<li>Company</li>
<li>Contact</li>
<li>Fi | En</li>
</ul>
</div>
</div>
CSS Code
.container{
margin:0 auto;
max-width:960px;
padding:0 5%;
width:90%
}
.section-nav{
background:#FFFFFF;
-webkit-box-shadow:0 0 5px #111;
-moz-box-shadow:0 0 5px #111;
box-shadow:0 0 5px #111;
color:#838383;
display:none;
font:800 .688em "proxima-nova",sans-serif;
letter-spacing:.3em;height:31px;line-height:31px;
position:absolute;
text-align:center;
text-transform:uppercase;
top:0;
width:100%;
z-index:9999
}
.section-nav.fixed{
position:fixed
}
.section-nav ul{
clear:both;
list-style:none;
margin:0;
padding:0
}
.section-nav li{
display:inline-block;
padding:0 3%
}
.section-nav li.active a{
color:#f7e442;
text-decoration:none
}
.section-nav a{
-webkit-transition:400ms;
-moz-transition:400ms;
-o-transition:400ms;
transition:400ms;
color:#838383;
font-weight:700;
outline:0;
text-decoration:none
}
.section-nav a.active,.section-nav a:hover{
color:#FF8C00;
text-decoration:none
}
.nav-trigger{
text-indent:100%;
white-space:nowrap;
overflow:hidden;
background:yellow;
cursor:pointer;
display:none;
float:right;
height:16px;
margin-top:7px;
width:16px
}
.section-header{
font:800 1.875em "proxima-nova",sans-serif;
letter-spacing:10px;
margin:0 0 20%;
padding-left:10px;
text-align:center;
text-transform:uppercase
}
Please have a look at inspect element on the browser if I am missing anything to mention over here.
I don't understand what's the problem - you're using "display: none;" on both
media="screen, projection"
.section-nav
and then (when it get's even smaller):
media="screen, projection"
screen.css:2057#media only screen and (max-width: 768px)
.section-nav .nav { display: none; }
i think you've got messed up with all the media queries and lost track of what does what :) happens to me all the time. you just need to use Chrome Inspector to figure those out ;-)
http://someimage.com/nFKmzAA
Position fixed has very poor support on mobile browsers.
You should use a media query to change it from position fixed to position absolute on mobile browsers.
in screen.css, line 93
.section-nav{
display:none;}
display none makes this issue.
Related
I was trying something out as a test but didn't quite know how to program it the right way. I was hoping someone could help me out with that.
I made a sketch so it would be a little more clear about what I want to achieve. The menu on the left needs to stay in that exact position.
Let's say the content next to the menu would be smaller than the menu itself. Then the green sections would go underneath the menu. This is not what I want to achieve. I was thinking about scaling the height of the content with Javascript if the content element is too small.
Do you feel like this is the right way to accomplish the desired result? Or could you suggest a better/cleaner way to accomplish this? (An example on jsfiddle would be great)
Thanks in advance!
Edit: I would also like to inform that the menu's height needs to be dynamic. For example what if I add an extra menu item.
You mean something like this?
Just be wary this Only works on MODERN browsers as I am using the checkbox hack :)
Here is a code snipet
*{
box-sizing:border-box;
margin:0px;
padding:0px;
}
#head{
background-color:#000;
border-bottom:#333 solid 1px;
display:block;
padding:10px 0px 0px 10px;
}
#head ul{
background-color:#f00;
display:block;
width:150px;
position:relative;
list-style:none;
margin:0px;
text-align:center;
}
#head li{
display:none;
}
#head input{
display:none;
}
#head input:checked ~ li{
display:block;
}
#head input:checked ~ label{
background-color:#511;
color:#fff;
}
#head label{
font-family:Constantia;
width:100%;
padding:10px 0px;
color:#333;
border-bottom:#111 dotted 1px;
display:block;
font-weight:bold;
text-transform:uppercase;
}
#head label:hover{
background-color:#511;
color:#fff;
cursor:pointer;
}
#head a:link{
background-color:#f00;
width:150px;
display:block;
color:#111;
text-decoration:none;
border-bottom:#333 solid 1px;
padding:10px;
float:left;
margin-right:10px;
}
#head a:visited{
color:#111;
}
#head a:hover{
background-color:#911;
color:#fff;
border-bottom:#211 solid 1px;
font-weight:bold;
}
#body{
padding:10px;
}
<div id="head">
<ul>
<input type="checkbox" id="menu" />
<label for="menu">Menu</label>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
<div id="body">
<h1>Content</h1>
<p> All my content sits here what am I suppose to do?</p>
</div>
By making use of floats rather than position absolute lets the browser know there is suppose to be content under the header if I had to change it to apply position absolute it would still go out the header but won't take up any space therfore the content wont shift next to or under it but rather behind the navigation.
You should see that the content will go below it when the window gets smaller if you wish to make the content not be squashed up a bit before going underneath the navigation is to set a min-width to the #body{} tag.
I want my banner image to go down a bit so that the subject's full head can be seen. As you can see in the desktop version, the subject's head is fully visible but in the mobile version of the website, I can't see the full head and also not the full picture. How do I make the image go down a bit so as the full picture can be seen?
photo of the mobile version of my website
Mobile version of the website
photo of the website desktop version of the website
html code
<header>
<div class="container">
<div class="intro-text">
<div class="intro-lead-in" style="font-family: 'Satisfy', cursive;">Welcome To ************</div>
<div class="intro-heading">The path you won't turn your back on</div>
About Us
</div>
</div>
</header>
css code
header{
background-image:url(../img/bg.jpg);
background-repeat:no-repeat;
background-attachment:scroll;
background-position:center center;
-webkit-background-size:cover;
-moz-background-size:cover;
background-size:cover;
-o-background-size:cover;
text-align:right;
color:black;
}
header .intro-text{
padding-top:100px;
padding-bottom:50px;
}
header .intro-text .intro-lead-in{
font-family:"Satisfy","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:40px;
line-height:22px;
margin-bottom:20px;
text-align: right;
}
header .intro-text .intro-heading{
font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight:800;
font-size:25px;
line-height:50px;
margin-bottom:50px;
text-align:right;
color: red;
}
#media (min-width:768px){
header .intro-text{
padding-top:350px;
padding-bottom:200px;
}
header .intro-text .intro-lead-in{
font-family:"Satisfy","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:40px;
line-height:40px;
margin-bottom:25px;
text-align:right;
}
header .intro-text .intro-heading{
font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight:800;
font-size:25px;
line-height:75px;
margin-bottom:30px;
text-align: right;
color: red;
}
}
#media only screen and (max-width: 480px) {
header .intro-text{
padding-top:140px;
padding-bottom:100px;
padding-left: 110px;
}
header .intro-text .intro-lead-in{
font-family:"Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;font-style: italic;
font-size:26px;
line-height:22px;
margin-bottom:20px
}
header .intro-text .intro-heading{
font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight:400;
font-size:17px;
line-height:18px;
margin-bottom:30px;
color: red;
}
}
Maybe something like this?
#media only screen and (max-width: 480px) {
body {
padding-top: 50px; // or your navbar height
}
}
It will move your content on mobile by 50px down.
I think that one thing that can solve this problem, is you remove the attribute "background-position: center center;" from the main, and put it inner media query for each size of page (mobile, desktop) changing the second value of attr background-position, wil stay this way for sample:
header{
background-image:url('back.jpg');
background-repeat:no-repeat;
background-attachment:scroll;
background-position:center center;
-webkit-background-size:cover;
-moz-background-size:cover;
background-size:cover;
-o-background-size:cover;
text-align:right;
color:black;
}
#media (min-width:768px){
background-position:center 40px !important;
}
#media (min-width:480px){
background-position:center 20px !important;
}
Sorry for my english, I hope that this can help you
You could change the background position in mobile device.
#media screen and (max-width: 480px) {
header {
background-position: 0px 100px;//0px from left 100px from top
}
}
EDIT: or you can use a specific image for mobile with the good dimensions
I have a primary and secondary navigation, when the user clicks a link the background-image of this link will change to an "active" state and reset all other links to "inactive". This works fine for my primary navigation, but my secondary navigation is not resetting resulting in all of my links having an active state. My Code:
HTML
<nav id="menu">
<div id="container">
Link 1
Link 2
Link 3
Link 4
Link 5
Link 6
</div>
</nav><!--END MENU-->
<div id="upperContent-title">Welcome</div>
<div id="upperContent-body">
Welcome Text
</div>
<img id="upperContent-img" src="img/welcomeImg.png"/>
</div><!--END UPPER CONTENT-->
<nav id="middleNav">
<div id="middleContainer">
Link 7
Link 8
</div>
</nav><!--END MIDDLE NAV-->
CSS:
#menu{
background-image:url(../menuBottom.jpg);
background-repeat:repeat-x;
position:absolute;
margin-left:auto;
margin-right:auto;
margin-top:4px;
width:1024px;
height:25px;
}
#container{
position:absolute;
margin-left:200px;
margin-top:-3px;
height:24px;
}
nav a[id*="menu"]{
background-image:url(../mainNav.png);
background-repeat:no-repeat;
display:inline-block;
text-align:center;
font-family:Arial,san-sarif;
text-decoration:none;
font-size:14px;
color:#000;
margin-left:-4px;
padding-top:5px;
margin-top:3px;
padding-bottom:10px;
width:129px;
height:25px;
}
#upperContent{
background-image:url(../upperWelcome.jpg);
background-repeat:no-repeat;
margin-left:auto;
margin-right:auto;
width:1024px;
height:306px;
}
#upperContent-title{
margin-left:60px;
padding-top:40px;
font-family:Arial,sans-serif;
font-size:36px;
color:#00853f;
width:459px;
}
#upperContent-body{
margin-left:60px;
padding-top:10px;
font-family:Arial,sans-serif;
font-size:14px;
color:#000000;
width:459px;
}
#upperContent-img{
position:absolute;
margin-left:578px;
margin-top:-183px;
}
#middleNav{
background-image:url(../middleNavBG.jpg);
background-repeat:no-repeat;
margin-left:auto;
margin-right:auto;
width:1024px;
height:43px;
}
#middleContainer{
margin-left:57px;
}
nav a[id*="middleNav"]{
background-image:url(../middleNavRect.jpg);
background-repeat:no-repeat;
display:inline-block;
text-align:center;
font-family:Arial,san-sarif;
text-decoration:none;
font-size:14px;
color:#FFF;
margin-left:-4px;
padding-top:8px;
margin-top:3px;
width:116px;
height:37px;
}
nav a[id*="middleNavCorner"]{
background-image:url(../middleNavRound.png);
background-repeat:no-repeat;
display:inline-block;
text-align:center;
font-family:Arial,san-sarif;
text-decoration:none;
font-size:14px;
color:#FFF;
margin-left:-4px;
padding-top:8px;
margin-top:3px;
width:116px;
height:37px;
}
JS:
//Initialize Document.ready
$(function(){
//Navigation
//Main Nav
$("a[id*='menu']").on({
click:function(e){
$("nav a[id*='menu']").css('background-image','url(urlHere/mainNav.png)');
$(this).css('background-image','url(urlHere/mainNavVisit.png)');
}
});
//Secondary Nav
$("a[id*='middleNav']").on({
click:function(e){
$("nav a[id*='middleNavLink']").css('background-image','url(urlHere/middleNavRect.jpg');
$(this).css('background-image','url(urlHere/middleNavRectVisit.jpg)');
}
});
});//End Document.ready
JSFiddle:
JSFiddle Of Intended Result
Any help would be greatly appreciated thanks!
This issue appears to have been within my .js document. I copied over the working code from my primary nav and used it for my secondary nav and it appears to work fine, trying to isolate the exact cause of the initial issue, but it appears to have been some sort of targeting or misspelling. thanks.
The problem is, in one of my pages I have a slide, where my images are 1920x1080 while the slide is just set to 1350 as width. My images are not getting centered, you just see about 1/3 of the picture's top left-middle-ish. The slide also doesn't reach out to the ends (<---->) of the screen, there's this tiny space there. Any solutions?
Picture: http://tinypic.com/view.php?pic=29crp7a&s=6
Code
Html:
<div id="container">
<div id="banner">
<ul class="bjqs">
<li><img src="images/lamborghini/av_lp700-4_roadster_ov3_v2_1920x1080.jpg" title="This is my slideshow!"></li>
<li><img src="images/lamborghini/gal_lp_550-2_home_1920x1080.jpg" title="Apparently it works!"></li>
<li><img src="images/lamborghini/gal_lp_550-2_spyder_home_1920x1080.jpg" title="By Andreas!"></li>
</ul>
</div>
</div>
<script src="js/jquery-1.6.2.min.js"></script>
<script src="js/basic-jquery-slider.min.js"></script>
<script>
$(document).ready(function() {
$('#banner').bjqs({
'animation' : 'slide',
'width' : 1350,
});
});
</script>
Css:
ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
li.bjqs-slide{display:none;position:absolute;}
ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;}
ol.bjqs-markers{list-style:none;margin:0;padding:0;z-index:9999;}
ol.bjqs-markers li{float:left;}
p.bjqs-caption{display:block;width:96%;margin:0;padding:2%;position:absolute;bottom:0;}
/* demo styles */
body{
font-family: 'Carter One', sans-serif;
}
#container{
width:100%;
padding:20px 0;
margin:0 auto;
overflow:hidden;
}
#banner {
height:300px;
width:700px;
margin:0 auto;
position:relative;
background:#fff;
#fff solid;
}
ul.bjqs-controls li a{
display:block;
padding:5px 10px;
position:absolute;
background:#000000;
color:#fd0100;
text-decoration:none;
text-transform:uppercase;
}
a.bjqs-prev{
left:0;
}
a.bjqs-next{
right:0;
}
p.bjqs-caption{
background:rgba(0,0,0,0.7);
color:#fff;
text-align:center;
}
ol.bjqs-markers{
position:absolute;
bottom:-50px;
}
ol.bjqs-markers li{
float:left;
margin:0 3px;
}
ol.bjqs-markers li a{
display:block;
height:10px;
width:10px;
border:4px solid #fff;
overflow:hidden;
text-indent:-9999px;
background:#000;
border-radius:10px;
}
ol.bjqs-markers li.active-marker a{
background:#fd0100;
}
The solution is very simple actually.
You need to set a width to your images to 100% in your CSS.
.bjqs img {
width:100%;
}
Hope that helps, good luck
Really love the drop down that I found on http://www.scriptiny.com/2008/04/sliding-javascript-dropdown-menu/
I have 4 Menus and when I add this this flows over the logo. The size of each menu is in fact too big. When I tried to alter this the size of sub-menus stay the same and it was looking ugly. I can't attach screenshot as SO doesnt allow me to.
I basically want the size of the menu box to be smaller;
CSS code is :
body {margin-left:140px; font:12px Verdana, Arial, Helvetica}
* {padding:0; margin:0}
.dropdown {float:right; padding-right:5px}
.dropdown dt {width:188px; border:2px solid #9ac1c9; padding:8px; font-weight:bold; cursor:pointer; background:url(images/header.gif)}
.dropdown dt:hover {background:url(images/header_over.gif)}
.dropdown dd {position:absolute; overflow:hidden; width:208px; display:none; background:#fff; z-index:200; opacity:0}
.dropdown ul {width:204px; border:2px solid #9ac1c9; list-style:none; border-top:none}
.dropdown li {display:inline}
.dropdown a, .dropdown a:active, .dropdown a:visited {display:block; padding:5px; color:#333; text-decoration:none; background:#eaf0f2; width:194px}
.dropdown a:hover {background:#d9e1e4; color:#000}
.dropdown .underline {border-bottom:1px solid #b9d6dc}
I agree with Glenn. Can we have more detail of what you did/tried?
I tested with FireFox 4.01 and FireFox 5.0 with a float:right on the dropdown class and got the results I expected.
EDIT:
++ to Wesley's solution as it's cleaner to wrap outside the dropwdown class...
If you can't figure it out the way it is, put it in a div with float:right
<div class="nav-wrapper">
<!-- Your navigation markup -->
</div>
.nav-wrapper {
float:right;
}