I have a navigation menu that is conflicting with a corner banner (image). However, it overlaps the navigation menu.
Here's what it looks like in a resolution greater than 1024x768:
And here's what it looks like in a browser with a resolution of 1024x768 (or less):
Here's my code (for the corner banner and navigation menu):
#cornerbanner {
background: url("../images/corner_banner.png") no-repeat;
display: block;
height: 117px;
width: 117px;
position: absolute;
top: 0;
right: 0;
z-index: 999;
text-decoration: none;
margin-top: -1px;
clear: both;
}
ul#navigation {
float: right;
display: inline;
margin-top: -28px;
}
ul#navigation li {
list-style:none;
display: inline;
margin-left: 80px;
text-transform: uppercase;
}
ul#navigation li a {
color: #4C4C4C;
font-size: 13px;
text-decoration: none;
font-weight: bold;
text-shadow: 1px 1px 1px #fff;
}
ul#navigation li.active {
border-bottom: 2px solid #C63E24;
padding-bottom: 3px;
}
How do you want it to look in resolutions smaller than 1024? Do you want the li's to resize themselves smaller? Or a horizontal scroll bar to appear?
My suggestion would be to consider a fixed width design combined with a grid system like:
Skeleton
960gs
Edit
If you want them side by side, you can either:
Float #cornerbanner instead of position absolute
Put a margin-right: 117px on the ul#navigation
Both of these require that the parent containing them is wide enough to hold them both.
Related
My navigation bar spans the width of the page but when I write object: fixed;, the navigation bar shrinks and goes over the text. I would like the navigation bar to be like dootrix.com, where it is sort of ingrained in the website and does not shrink when you scroll down!
I have created a JSFiddle with my code: https://jsfiddle.net/kpsq8r9m/
Here is my CSS:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
border-style: solid;
border-color: darkgrey;
border-width: 6px;
position: fixed;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
padding: 14px 50px;
text-decoration: none;
}
Any help would be greatly appreciated!
EDIT: What I meant when it was "shrinking" was if I did not have position:fixed; it would extend to the entire page but when I did it shrunk. In order to see what I am talking about I would recommend trying this out in google chrome.
Please try:
.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
width: 100%;
}
z-index:100 should do the trick.
I'm currently building my very first responsive website.
For tablet, laptop and desktop use, the navigation is 'sticky' and works just as i'd like it to.
For any display smaller than that, the navigation is hidden inside a typical 'burger menu' which unveils the nav upon click.
This all works fine, however my issue is with the display of the nav upon 'burger-click'. The nav is displayed above the header and the content below, rather than pushing any content aside/down the screen and I feel it would by default.
I feel the issue is to do with positioning, I just can't put my finger on what.
Here is the position of my nav elements when displayed in it's regular and responsive states:
/* HEADER & NAV
--------------------------*/
header {
height: 140px;
position: relative;
background-image: url("../img/headerback.jpg");
text-align: center;
padding-top: 1.4em;
font-family: 'Josefin Sans', sans-serif;
text-transform: uppercase;
}
header a {
font-size: 4.8em;
border-bottom: solid 5px #b9beaa;
}
header a, nav li, footer, footer a {
text-decoration: none;
color: #fff;
}
nav {
height: 36px;
position: absolute;
bottom: 0;
width: 100%;
font-size: 0.245em;
padding-top: 2.5em;
}
nav li {
display: inline;
padding: 0 0.6em 0 0.7em;
}
nav li a {
border: none;
letter-spacing: 2px;
position: relative;
}
/*----------------- Responsive Nav */
nav ul {
display:none;
}
nav a#navIcon{
position: absolute;
right: 20px;
top: 20px;
border-bottom: none;
}
nav {
font-size: 0.6em;
}
nav li {
display: block;
padding-bottom: 0.6em;
}
header a {
font-size: 1.6em;
}
This is also my first attempt at using JSFiddle.
If anyone needs me to supply anything else please ask.
Thanks for any help.
https://jsfiddle.net/AlexEd/5a98ttq8/
There are a few issue preventing your navigation menu push down the content below:
jquery that hard set the height of ".nav-placeholder" div. the height should be "auto" so the browser can calculate the height and push the content below.
jQuery(".nav-placeholder").height("auto");
nav tag is position: absolute. change it to static. and height: auto.
nav {
font-size: 0.6em;
position: static;
height: auto;
}
header tag change height to auto in #media only screen and (max-width : 480px)
header {
height: auto;
padding-top: 0.8em;
padding-bottom: 0.2em;
}
I put together an example
https://jsfiddle.net/jonathon_wei/865nsj9q/1/
In my PSD file I have a nav bar with some light effect in the background. I'm a bit concerned whether should I slice the whole nav bar and then add text or just slice it into smaller pieces? Which would be the best practice?
I'm new to this subject so any ideas would be so much appreciated.
You for sure want to cut the nav bar images into pieces. Add them to the background of each of the nav bar links with css. It will save you a big headache later.
Here is a good example of a jsfiddle
Css
#nav {
display: block;
height: 40px;
line-height: 35px;
list-style: none outside none;
margin: 20px auto 0 auto;
position: relative;
max-width: 750px;
min-width: 750px;
width: 78.2%;
}
#nav li {
display: inline;
text-align: center;
float:left;
}
#nav li a{
color: #fff;
display: block;
float: left;
font-family: HelveticaNeue-light,Helvetica,sans-serif;
font-size: 1em;
height: 100%;
padding: 0px 23px 0;
text-align: center;
text-decoration: none;
line-height: 40px;
background:#4D4D4D;
position: relative;
}
#nav li a span {
position: absolute;
left: 0;
top: 40px;
display: none
}
#nav li a:hover, #nav .active a {
background: url("path/to/image.png") no-repeat bottom center #a4c723;
color: #4d4d4d;
}
#nav li a:hover span, #nav .active a span {
display: block;
}
if you mean gradients, you can use gradient generator http://www.colorzilla.com/gradient-editor/
As for me, using as few images as possible is best practice. Draw your navbar with css, good luck
I am a little stuck. I am trying to build a horizontal navigation bar, 1024px across, which will allow for a submenu to display below it. But i want the submenu to also be 1024px in width and to display directly below the navigation bar, vertically aligned.
At the moment the submenu appears but fixes its left side to the left side of the current li that you are hovering over. How can I fix this?
Thanks!
EDIT: So on mouse over it would look something like this: http://eventav.biz/site/example.jpg
Link to what I've done so far -
http://www.eventav.biz/site/
ul.top_menu {
position: relative;
margin: 0;
margin-bottom: -1px;
list-style: none;
display: table;
width: 1024px;
border: 1px solid #111111;
border-bottom: 1px solid #000000;
border-radius: 10px 10px 0px 0px;
}
.top_menu li {
display: block;
position: relative;
border-right: 1px solid #111111;
float: left;
margin: 0px;
display: table-cell;
vertical-align: middle;
}
.top_menu li:first-child {
border-left: 1px solid #111111;
}
.top_menu li a {
display: block;
text-decoration: none;
color: #000000;
text-shadow: 3px 3px 8px #3A3A3A;
padding: 15px;
height: 30px;
display: table-cell;
vertical-align: middle;
margin: 0px;
}
#top_menu_item ul {
display: none;
margin: 0px;
}
#top_menu_item:hover ul {
display: block;
position: fixed;
margin: 0;
}
#top_menu_item:hover li {
width: 1024px;
background-color: #666;
text-align: left;
color: #FFF;
font-size: 12px;
margin: 0px;
}
<ul class="top_menu">
<li id="top_menu_item">HOME</li>
<li id="top_menu_item">OUR SERVICES
<ul><li id="top_menu_item">test</li></ul>
</li>
<li id="top_menu_item">EXAMPLES OF OUR WORK
<ul><li id="top_menu_item">test</li></ul>
</li>
<li id="top_menu_item">CONTACT US</li>
</ul>
Remove the fixed positioning from the child ul, and replace it with position:absolute. Add in left:0px, and then remove position:relative from the parent li.
Working jsFiddle example
#top_menu_item:hover ul {
display: block;
position: fixed; /* Change this to position:absolute; */
left:0px; /* Add this */
}
.top_menu li {
display: block;
position: relative; /* Remove this */
}
1) Remove position: relative; from #top_menu_item
2) Set #top_menu_item ul to position: absolute; left: 0; instead
3) Remove left padding on #top_menu with padding-left: 0;
4) Add:
#top_menu_item:first-child {
margin-left: 40px;
}
Essentially, the problem was that you've been positioning your inner ul tag relative to it's parent li. Instead, the solution above positions the secondary navigation absolutely in relation to the primary navigation, and we use left: 0; to make sure it's completely left-aligned.
It's also against the standard to use an id multiple times on a page. Therefore I'd recommend changing #top_menu_item into .top_menu_item and changing the HTML accordingly.
Let me know if you have any problems!
I have a (CSS) stacking question.
The tab-boxes on my development site below have z-index set as -1 so that their border appears behind the tabs above them, so that the active tab's white bottom border covers it. But on all browsers but Opera this makes descendants of the tab-boxes (links, forms, etc.) unclickable. You can see this at:
http://od.philosofiles.com/
Can anyone help? Here's the bare bones of the HTML and CSS, though examining the link above with Firebug would probably be more illuminating:
<ul class="odtabs">
<li id="tab-Authors1" class="first active">Tab</li>
</ul>
<div id="tab_content-Authors1" class="odtab-content">
<p>Tab Box</p>
</div>
<style type="text/css">
<!--
.odtabs li {
float: left;
background-color: #ddd;
width: 80px;
height: 19px;
list-style-type: none;
}
.odtabs li.active {
background-color: white;
border-bottom-color: white;
}
.odtab-content {
border: 1px solid #babcbd;
margin-top: -1px;
clear: both;
position: relative;
top: -1px;
z-index: -1;
}
-->
</style>
Set z-index to -100.
.odtab-content {
border:1px solid #BABCBD;
clear:both;
font-size:0.9166em;
margin-top:-1px;
padding:0 1em;
position:relative;
top:-1px;
z-index:-100;
}
I finally fixed this myself, after a lot of experimentation with line-by-line reconstruction. I believe the problem was due to the z-index being negative; however, the only way to make it work with a positive z-index and a higher positive z-index was to set position: relative on the tabs, which required quite a different approach. (Apparently z-index only works on absolute, relative or fixed positioned elements.) Here, for those interested/with similar problems, is the full CSS I used:
ul.odtabs {
display: inline;
margin: 0;
padding: 0;
}
.odtabs li {
float: left;
background-color: #ddd;
border: 1px solid #babcbd;
width: 80px;
height: 19px;
margin-right: 2px;
text-align: center;
list-style-type: none;
position: relative;
z-index: 2;
}
.odtabs li.active {
background-color: white;
border-bottom-color: white;
}
.odtabs a {
color: #78797c;
font-size: 0.75em; /* 9px = 12*0.75 */
font-weight: bold;
margin-top: 0px;
padding-top: 0px;
}
.odtabs .last {
margin-right: 0px;
}
.odtab-content {
font-size: 0.9166em;
border: 1px solid #babcbd;
padding: 0px 1em; /* ie. 12px */
clear: both;
position: relative;
top: -1px;
z-index: 1;
}