I have a rather nice navbar but unfortunatly, when I resize my laptop window a bit, the text starts overlapping. It seems to be stuck in the middle and wont make use of all the space, despite me having checked throughly that here are no padding or margins causing this.
This is how it looks on a big screen
this is the problem when I narrow the window a bit
Could someone please help me figure out why this is happening, please?
I would be very grateful.
My main CSS navbar (displayed on small screens):
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
/* I tilfælde af at der skal cleares */
br.tabula {
clear: both;
}
a {
text-decoration: none;
color: orange;
}
/*Fjerner underline osv.*/
a:link, a:visited {}
a:hover {}
a:active {}
/***********************************************************/
/* Specielle! */
/***********************************************************/
/***********************************************************/
/* Billeder! Img! ****** Video! */
/***********************************************************/
#burger {
width: 15px
}
img.lille-l {
float: left;
margin: 8px 20px 20px 0;
width: 160px;
height: 165px;
}
img.mellem-r {
float: right;
padding: 20px;
width: 350px;
}
img.top {
margin: 8px 0 20px 0;
}
.sponsor {
width: 50px;
height: 50px;
border: 0;
padding-bottom: 22px;
}
.klik {
padding: 5px;
box-shadow: 3px 5px #888888;
}
#socialbar img {
width: 30px;
height: 30px;
}
iframe {
width: 390px;
height: 250px;
float: left;
padding: 10px 15px 10px 0px;
border: none;
}
/***********************************************************/
/* Tekst! */
/***********************************************************/
h1, h2, h3 {
margin: 0 0 1% 0
}
/*****************************************************************************/
/* HEADER! ****** BANNER! */
/******************************************************************************/
#bannerkat {
margin-top: 1%;
width: 100%;
height: 46px;
background-image: url("billeder/katte/mathilde.jpg");
background-size: cover;
color: white;
border-bottom: solid 1px #444444;
}
/******************************************************************************/
/* NAV! */
/******************************************************************************/
/* Menu Button */
#menu-button {
z-index: 1;
text-align: center;
padding: 5px 5px 5px 5px;
position: absolute;
position: fixed;
top: 15px;
right: 5px;
transition: all 0.2s ease;
cursor: pointer;
width: 50px;
height: 35px;
background-color: #19c589;;
border-radius: 5px; /* pæne runde hjørner*/
-moz-border-radius: 5px; /* Fox*/
-webkit-border-radius: 5px; /* IE */
}
nav p {display:none;}
#mainlogo {display:none;}
#menu-button .bar {
display: block;
height: 4px;
background: black;
margin: 4px;
}
#menu-checkbox {
display: none;
}
#menu-checkbox:checked ~ #menu-button {
transform: rotate(90deg);
}
nav ul {
position: fixed;
display: none;
width: 100%;
}
#menu-checkbox:checked ~ #menu {
display: block;
}
#menu {
display: none;
list-style: none;
margin: 0;
padding: 0;
border-radius: 20px;
overflow: hidden;
}
#menu li {
width: 100%;
background-color: beige;
text-align: center;
padding: 7px 2px 7px 2px;
}
This is the code for the nav in the images, displayed on larger screens with media query:
#mainlogo {display: block;}
#bannerkat {display: none;}
#menu-button {
display: none;
}
#menu {
display: block;
border-radius: 0;
text-align: center;
position: relative;
}
.mainheader {width: 100%; padding: 0 auto;
margin: 0}
#menu ul {width:100%; padding: 0 auto;
margin: 0}
#menu li {
display: inline-block;
width: 12%;
background: none;
padding: 0 ;
margin: 0;
}
#menu li a {
font-size: normal;
text-decoration: none;
color: #505050;
text-align: center;
line-height: 75px;
text-transform: uppercase;
transition: all .4s ease;
display: inline-block;
width: 100%;
border-top: 5px solid #80bb80;
}
#menu li:nth-of-type(2) a {
border-top: 5px solid #9b5e5e;
}
#menu li:nth-of-type(3) a {
border-top: 5px solid #5656b3;
}
#menu li:nth-of-type(4) a {
border-top: 5px solid grey;
}
#menu li a:hover {
border-top: 5px solid darkgreen;
}
}
nav { font-family: helvetica, arial, sans-serif;}
/* højde for billed-sektion*/
section {min-height: 204px;}
#baggrund {
background:
url("billeder/katte/sophi.png");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;}
#mainlogo {
font-size: 37px;
color: white;
border: 7px solid white;
display: inline-block;
padding: 10px;
position: absolute;
height: 123px;/* hvid boks*/
line-height: 25px;
top: 202px;
margin-top: -180px;
left: 50%;
width: 600px;
text-align: center;
margin-left: -300px;
text-shadow: 1px 2px 1px #000;
box-shadow: 1px 2px 1px #000; }
/* og omegns */
#mainlogo p {font-size: 20px; padding:5px;}
.vector{width: 60px;
margin-left: -450px;
margin-top: -36px;}
.mainheader {margin-top: 10px;}
/* Navigations menuen (links osv) */
#nav_wrap {
background: #f9f4ea;
width: 100%;
white-space: nowrap;
float: left;
height: auto;;
position: relative;
margin-top: 144px;
bottom: 0;
overflow: hidden;
z-index: 00;
opacity: .9;
box-shadow: 0px 1px 4px beige;
padding: 0;
}
/* MAIN! BODY! *********************************************************/
body {
background-image: url("billeder/bgorange.jpg");
background-size: cover;
color: black;
/* Base font size (14px)? 7%*/
font-family: sans-serif, arial;
line-height: 1.5;
text-align: left;
}
.body { width: 90%;}
.maincontent {
line-height: 20px;
width: 79%;
float: left;
border-radius: 5px;
/* pæne runde hjørner*/
-moz-border-radius: 5px;
/* Fox*/
-webkit-border-radius: 5px;
/* IE */
}
#Ginger
You should remove fixed width: 12% from #menu li.
#menu li word needs to be wrapped and font-size should be small on lower screen size. i.e word-wrap:break-word
I have the following drop down:
CSS:
.third-menu{
position: relative;
top: -50px!important;
}
.dropdown-submenu {
border-bottom: 1px solid #ccc;
}
#mn-wrapper {
display: block;
width: 100%;
position: absolute;
height: 30px;
}
.mn-sidebar {
margin-left: 40px;
display: block;
position: relative;
vertical-align: middle;
padding-bottom: 1px;
background: #333333;
width: 250px;
z-index: 2;
}
#mn-cont {
display: block;
vertical-align: top;
position: relative;
padding: 10;
}
.container {
margin-right: auto;
}
.cnt-mcont {
background-color: #F6F6F6;
color: inherit;
font-size: 13px;
font-weight: 200;
line-height: 21px;
padding: 15px 30px 30px 30px;
margin-top: 0;
height: 101vh;
}
.mn-sidebar .mn-toggle {
display: none;
padding: 10px 0;
text-align: center;
cursor: pointer;
}
.mn-vnavigation {
margin: 0 0 0 0;
padding: 0;
border-top: 2px solid #CCFFFF;
border-bottom: 1px solid #CCFFFF;
border-left: 5px solid #CCFFFF;
border-right: 5px solid #CCFFFF;
}
.mn-vnavigation li a {
border-top: 2px solid #CCFFFF;
border-bottom: 1px solid #CCFFFF;
display: block;
padding: 14px 18px 13px 15px;
color: #fff;
text-decoration: none;
font-size: 12px;
font-weight: 300;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
white-space: nowrap;
}
.dropdown-submenu >
.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
/*height: 590px; */
width: 300px;
background: #333333;
}
.dropdown-submenu:hover >
.dropdown-menu {
display: list-item;
}
.dropdown-submenu > a:after {
display: list-item;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
ul {
list-style: none;
}
ul.dropdown-menu.parent {
margin-top: -1px;
}
Javascript in the fiddle.
Here's the jsfiddle:
http://codepen.io/anon/pen/LpxVdv
Now, when I hover over the items, say on Central Compliance, then the remaining items below it (Control Room, Wealth Applications etc.) disappear. And if I over over Control Room, then Orchestria comes in the white space.
How can this be fixed??
add this to your css:
.third-menu{
position: absolute;
right:0;
top:0;
}
.dropdown-submenu {
border-bottom: 1px solid #ccc;
position:relative;
}
It doesn't disapeare, the active item expands to have enought height to contain menu from next level. Try using position:absolute for next level container.
Small problem on my Joomla site.
I have added a menu module that is not displaying in full on the site. Its in a that is configured to be 100% of the screen.
But with the menu when I try to make it 100% of the screen it is cut on both sides.
Where could I find where is the menu configured?
Or how should I start with it?
<body id="body">
<div id="siteWrapper">
<header id="header">
<div class="wrapper container">
<div class="siteLogo"></div>
<div class="ol_clearFR"></div>
<div id="mainMenu">
<div class="moduletable">
<ul class="jb_free_dropdown jb_free_dropdown_111"></ul>
</div>
<div class="moduletable">
<ul class="jb_free_dropdown jb_free_dropdown_105">
<li class="item-126 current active"></li>
<li class="item-118 parent"></li>
<li class="item-122">
</li>
<li class="item-123"></li>
<li class="item-124"></li>
</ul>
</div>
</div>
<div class="cleartBoth"></div>
</div>
</header>
CSS FROM DROPDOWN:
#charset "UTF-8";
ul.jb_free_dropdown,
ul.jb_free_dropdown li,
ul.jb_free_dropdown ul {
list-style: none;
margin: 0;
padding:0 ;
font-family: Tahoma, Geneva,sans-serif;
text-align: left;
vertical-align: middle;
}
/*This is for menu item links by Nejc Vukovic*/
ul.jb_free_dropdown li.item-124
{
margin-right:1px;
float:right;
background: #FFFFFF;
}
ul.jb_free_dropdown li.item-126 {border-style:none}
ul.jb_free_dropdown.jb_free_dropdown_105
{width:100%;}
ul.jb_free_dropdown li.item-118 a:after {
content:url(../../../../images/trianglegrey8x4.png);
display: inline-block;
vertical-align: middle;
padding-left:10px;
margin-bottom: 6px;
}
ul.jb_free_dropdown li.item-122 a:after {
content:url(../../../../images/trianglegrey8x4.png);
display: inline-block;
vertical-align: middle;
padding-left:10px;
margin-bottom: 6px;
}
ul.jb_free_dropdown li.item-123 a:after {
content:url(../../../../images/trianglegrey8x4.png);
display: inline-block;
vertical-align: middle;
padding-left:10px;
margin-bottom: 6px;
}
ul.jb_free_dropdown {
position: relative;
z-index: 597;
float: left;
}
ul.jb_free_dropdown li {
float: left;
min-height: 1px;
line-height: 1.3em;
vertical-align: middle;
margin-left:1px;
}
ul.jb_free_dropdown li.hover,
ul.jb_free_dropdown li:hover {
position: relative;
z-index: 599;
cursor: default;
}
ul.jb_free_dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
ul.jb_free_dropdown ul li {
float: none;
}
ul.jb_free_dropdown ul ul {
top: 0px;
left: 100%;
}
ul.jb_free_dropdown li:hover > ul {
visibility: visible;
}
/* -- Base drop-down styling -- */
ul.jb_free_dropdown {
font-weight: bold;
}
ul.jb_free_dropdown li {
padding: 7px 10px;
border-style: solid;
border-width: 1px 1px 1px 0;
border-color: #fff #d9d9d9 #d9d9d9;
background-color: #f6f6f6;
color: #000;
}
ul.jb_free_dropdown li.hover,
ul.jb_free_dropdown li:hover,
ul.jb_free_dropdown li.on {
background-color: #eee;
color: #000;
}
ul.jb_free_dropdown a:link,
ul.jb_free_dropdown a:visited { color: #000; text-decoration: none; }
ul.jb_free_dropdown a:hover { color: #000; background-color: #ececec;}
ul.jb_free_dropdown a:active { color: #000000; }
/* -- level mark -- */
ul.jb_free_dropdown ul {
width: 100%;
margin-top: 1px;
}
ul.jb_free_dropdown ul li {
font-weight: strong;
}
ul.jb_free_dropdown a,
ul.jb_free_dropdown span {
display: block;
padding: 1px 10px;
background: #f4f4f4;
width: 100%;
}
/* -- Base style override -- */
ul.jb_free_dropdown li {
padding: 0;
border: none;
}
/*
JB
*/
ul.jb_free_dropdown li li.parent a {
background: #FFFFFF('../../media/images/arrow.png') right 10px no-repeat;
}
ul.jb_free_dropdown li li.parent li a {
background: #FFFFFF;
}
ul.jb_free_dropdown li.parent a:hover {
background-color: #FFFFFF;
}
ul.jb_free_dropdown li li.child a {
background: #FFFFFF;
}
ul.jb_free_dropdown li.active a {
background-color: #FFFFFF;
}
ul.jb_free_dropdown li.active li a {
background-color: #FFFFFF;
}
ul.jb_free_dropdown li.active li a:hover {
background-color: #FFFFFF;
}
/*
JB
*/
ul.jb_free_dropdown ul a,
ul.jb_free_dropdown ul span {
padding: 1px;
width: 100%;
display: block;
border-width: 5px;
border-style: ridge;
border-color: #F8F8F8;
-moz-border-radius: 2px; /* FF1+ */
-webkit-border-radius: 2px; /* Saf3-4 */
border-radius: 2px;
}
/* -- Base style reinitiate: post-override activities -- */
/* -- Custom styles -- */
ul.jb_free_dropdown li.hover,
ul.jb_free_dropdown li:hover {
content: url(../../../../images/trianglegrey16x8.pn) 0 100% repeat-x;
color: #000;
background-color: #FFFFFF;
}
ul.jb_free_dropdown li:hover {
color: #F8F8F8;
}
ul.jb_free_dropdown li a:active {
background-color: #FFFFFF;
}
ul.jb_free_dropdown li a:link{background-color: #FFFFFF}
ul.jb_free_dropdown li a:visited{background-color: #FFFFFF}
ul.jb_free_dropdown
/* -- Mixed -- */
ul.jb_free_dropdown li a,
ul.jb_free_dropdown *.dir {
border-left-style: solid;
border-width: 1px;
border-left-color: #E8E8E8;
}
/* -- Drop-down open -- */
AND TEMPLATE CSS:
/* CSS Document */
#font-face {
font-family: 'ol_icons';
src: url("../fonts/ol_icons.eot");
src: url("../fonts/ol_icons.eot?#iefix") format('embedded-opentype'), url("../fonts/ol_icons.woff") format('woff'), url("../fonts/ol_icons.ttf") format('truetype'), url("../fonts/ol_icons.svg#ct_icons") format('svg');
font-weight: normal;
font-style: normal;
}
body {
background-color: #f7f7f7;
}
p {
margin: 10px 0 12px 0;
}
a {
color: #369;
}
a:hover {
text-decoration: none;
background-color: #F8F8F8;
}
a:focus {
outline: none;
}
h1, h1 a, h1 span,
h2, h2 a, h2 span,
h3, h3 a, h3 span,
h4, h4 a, h4 span,
h5, h5 a, h5 span,
blockquote {
display: block;
margin: 0;
padding: 0;
text-decoration: none;
width: auto;
}
h1, h2, h3, h4, h5 {
margin: 0 0 10px 0;
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5), 0px -1px 0px rgba(0, 0, 0, 0.15);
}
h1 a, h2 a, h3 a, h4 a, h5 a {
cursor: pointer;
}
#header{background: rgba(255,255,255,0.7);}
.row > div,
.row_main > div,
.error {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
header{
z-index: 50000;
}
.page-header {
bordr: none;
padding: 0;
margin: 0;
width100%;
}
blockquote {
font-size: 18px;
font-style:italic;
line-height: 19px;
}
#main img {
border:medium none;
margin:0 10px 0px 0;
max-width:100%;
outline:meium none;
}
.ol_imgRaw {
-webkit-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.collapse {
-moz-transition:heigt 0.35s ease 0s;
height:0;
overflow:hidden;
position:relative;
}
/* logo ------------------------------- */
.textLogo { font-size: 35px; }
.slogan { font-size: 12px;}
/* LISTS ------------------------------- */
ul, ol {
margin: 1em 0;
padding: 0;
padding-left: 0;
margin-left: 15px;
}
li {
line-height: inherit;
}
ul li {
margin-left: 0;
}
ul.category {
list-style: none inside none;
}
ul.category li {
padding: 7px;
}
ul.ol_squareList,
ul.ol_arrowList,
ul.ol_starList,
ul.ol_checkList {
list-style: outside;
}
ul.ol_arrowList {list-style-image: url(../images/ul_arrow.png);}
ul.ol_arrowList.back {list-style-image: url(../images/ul_arrow_black.png);}
ul.ol_arrowList.white {list-stye-image: url(../images/ul_arrow_white.png);}
ul.ol_checkList {list-style-image: url(../images/ul_check.png);}
ul.ol_checkList.black {list-style-image: url(../images/ul_check_black.png);}
ul.ol_checkList.white {list-style-image: url(../images/ul_check_white.png);}
ul.ol_arrowList li, ul.ol_starList li, ul.ol_checkList li {
background: non;
}
ul.ol_arrowList li ul,
ul.ol_starList li ul,
ul.ol_checkList li ul,
ul li ul li ul, ul li ul li ul li ul {
margin-left: 13px;
}
/* SLIDER -------------------------------------*/
#ol_headerWrapper {
position: relaive;
z-index: 30;
height: auo;
overflow: visble;
margin: auo
margin-bottom: 20px;
}
#ol_headerContent{
position: rlative;
height: aut;
margin: auo;
-webkit-border-radius: px;
border-radius: 10px;
}
/* Flash header -------------------------------------------------------------------------------------------------------- */
#mx-headerout { background-color: #6e6e6; margin-top: -15px; -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0px 4px rgba(0, 0, 0, 0.25);
box-shadow: 0 0px 4px rgba(0, 0, 0, 0.25);
-pie-box-shadow: 0 0px 4px rgba(0, 0, 0, 0.15)}
#mx-header { margin-bottom: 1px; padding: 0px; }
/* Mobile */
#media handheld, only screen and (max-width: 940px) {
#mx-header { display: none; }
}
/* Copyright -------------------------------------------------------------------------------------------------------- */
#copyright { margin-top: 0.5em; margin-bottom: 0; padding: 10px;float:right;}
#copyright p { margin-bottom:0; }
#copyright ul { margin:0; padding: 1.2em 0 0; }
#copyright ul li { float:left; list-style:none; background: none; }
#copyright ul li a { display:block; color: #1F1F1F; }
#copyright ul li.active a, #copyright ul li a:hover, #copyright ul li:hover a, #copyright ul li.sfHover a { color: #0099FF; text-decoration:none; }
/* MODULE POSITION CONTAINERS -------------------------------------*/
.cleartBoth {
clear: both;
}
.ol_clearFL {
clear: left;
}
.ol_clearFR {
clear: right;
}
.cleartBoth,
.ol_clearFL,
.ol_clearFR {
margin: 0 !important;
padding: 0 !important;
}
.ol_module, .ol_left {
float: left;
}
.ol_right {
float: right;
}
/* TABLE STYLES ------------------------------------------*/
.table-striped tbody tr:nth-child(2n+1) td,
.table-striped tbody tr:nth-child(2n+1) th {
background: none;
}
.table th, .table td {
border-top: none;
}
#siteWrapper {
color: #333;
}
/* MODULE BOX STYLES -------------------------------------*/
.moduletable {
height: auto;
}
.ol_left .moduletable,
.ol_right .moduletable,
.ol_left .moduletable_ol_dark,
.ol_right .moduletable_ol_dark,
.ol_left .moduletable_ol_light,
.ol_right .moduletable_ol_light,
.ol_left .moduletable_ol_red,
.ol_right .moduletable_ol_red,
.ol_left .moduletable_ol_green,
.ol_right .moduletable_ol_green,
.ol_left .moduletable_ol_blue,
.ol_right .moduletable_ol_blue {
padding: 10px;
}
.moduletable_ol_dark,
.moduletable_ol_light,
.moduletable_ol_red,
.moduletable_ol_green,
.moduletable_ol_blue {
width: auto;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
box-shadow:0 1px 4px rgba(0,0, 0, 0.25);
-pie-box-shadow: 0 2px 0px rgba(0, 0, 0, 0.15);
}
.moduletable_ol_light {
color: #333;
background-color: #fff !important;
}
.moduletable_ol_dark {
color: #ccc;
background-color: #333 !important;
}
.moduletable_ol_red {
color: #f1f1f1;
background-color: #cc0000 !important;
}
.moduletable_ol_green {
color: #f1f1f1;
background-color: #339933 !important;
}
.moduletable_ol_blue {
color: #f1f1f1;
background-color: #336699 !important;
}
/* LINKLIST ------------------------------------------------------------------------*/
.moduletable_ol_linkList a {
position: relative;
display: block;
border: none;
font-weight: normal;
font-size: 15px;
padding: 5px 0 5px 0;
text-decoration: none;
padding: 5px 10px 5px 0;
width: auto;
background-image: url(../images/icon_link_arrow.png);
background-color: transparent;
background-position: center right;
background-repeat: no-repeat;
float: left;
clear: both;
cursor: pointer;
}
/* VOTING / RATING ------------------------------------------------------------------------*/
.content_vote {
margin: 5px 0;
}
.content_vote input[type="radio"] {
margin: 0 2px 0 3px;
}
.content_vote input.button {
display: inline;
text-align: center;
text-decoration: none;
height: 23px;
width: auto;
cursor:pointer;
font-size:12px;
font-weight:normal;
color:#FFFFFF;
text-shadow:0 -1px 0 rgba(0, 0, 0, 0.4);
padding: 2px 7px 7px 7px;
margin-left: 10px;
}
/* ACTIONS PANEL (PRINT & E-MAIL) ------------------------------------------------------------------------*/
.actions {
margin: 0;
padding: 0;
list-style: inside none;
float: right;
width: auto;
}
.actions > li {
float: left;
}
.actions > li {
width: 20px;
height: 20px;
overflow: hidden;
white-space: nowrap;
padding: 0;
margin-left: 7px;
}
.actions li > a > i {
font-size: 18px;
width: 20px;
height: 20px;
}
.print-icon a,
.email-icon a,
.edit-icon a {
}
.print-icon a img, .email-icon a img, .edit-icon a img{
opacity: 0;
-moz-opacity: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter:alpha(opacity=0);
}
i.tip {
z-index: 0 !important;
max-width: auto;
padding: 0;
-webkit-border-radius: 0;
border-radius: 0;
background: none;
-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
-moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
.print-icon > a > i,
.email-icon > a > i,
.edit-icon > a > i,
.print-icon > a:hover > i,
.email-icon > a:hover > i,
.edit-icon > a:hover > i {
background-image: none !important;
margin-right: 5px;
}
.print-icon > a,
.email-icon > a,
.edit-icon > a {
}
.print-icon > a > i:before,
.email-icon > a > i:before,
.edit-icon > a > i:before {
font-family: 'ol_icons';
font-style: normal;
}
.print-icon > a > i:before{ content: '\e716'; } /* '' */
.email-icon > a > i:before { content: '\2709'; } /* '✉' */
.edit-icon > a > i:before { content: '\270d'; } /* '✍' */
#ocpanel {
padding: 10px;
clear: both;
font-size: 37px;
left: 40%;
top: 45%;
position:absolute;
color: #888;
display: block;
text-shadow: 1px 3px 3px rgba(0,0,0, 0.5);
}
/* LOGIN -----------------------------------------*/
#login-form p {
margin-top: 5px;
}
.ol_logins {
display: inline-block;
margin-left: 0;
padding-left: 14px;
list-style: outside;
list-style-image: url(../images/icon_link_arrow_small_hover.png);
}
.ol_logins li {
width: 100%;
}
.ol_logins li a {
font-weight: bold;
font-size: 12px;
text-decoration: none;
}
#form-login-remember {
display: block;
}
#form-login-remember label,
#form-login-remember input {
float: left;
}
#form-login-remember label {
line-height: 19px;
}
#form-login-remember input {
clear: right;
}
#login-form .button {
float: left;
clear: left;
margin-top: 10px;
display: inline-block;
}
.login-fields {
margin-bottom: 10px;
}
.login .button {
margin-top: 5px !important;
}
.logout-button .button {
margin: 0 !important;
float: none !important;
}
.login-greeting {
height: 25px;
font-size: 14px;
padding-top: 5px;
margin-right:15px;
}
/* COMPACT VERSION FOR HEADER */
#login-form.compact,
#login-form.compact fieldset
{
width: auto;
}
#login-form.compact p {
padding: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
float: left;
display: inline-block;
}
#login-form.compact #form-login-username label,
#login-form.compact #form-login-password label,
#login-form.compact #form-login-remember,
#login-form.compact .ol_logins
{
display: none;
}
#login-form.compact input[type="text"],
#login-form.compact input[type="password"]
{
width: 120px;
height: 25px;
margin-right:5px;
padding-left: 7px;
}
#login-form.compact .button
{
margin: 0;
float: left;
display: inline-block;
margin:0 !important;
text-indent: -9999px;
overflow: hidden;
width: 25px;
padding: 0;
padding-bottom: 1px;
background-position: right;
background-repeat: no-repeat;
height: 25px;
}
#login-form.compact .button
{
float: none;
clear: none;
margin-top: 0;
}
/*-----------------*/
/* RESET / REMIND / REGISTRATION */
.reset, .remind, .registration {
max-width: 460px;
white-space: normal;
}
.reset .form-actions,
.remind .form-actions,
.registration .form-actions {
}
/* HEADER SEARCH ------------------------------------------------------------------------*/
#ol_hIn h3 {
display: none;
}
#ol_hIn label,
#ol_hIn .finder label {
visibility: hidden;
width: 0;
height: 0;
}
#search #mod-search-searchword,
#search .finder input {
width: 200px;
padding-left: 30px;
background-repeat: no-repeat;
}
#ol_hIn .search input,
#ol_hIn .finder input {
background-repeat:no-repeat;
height:25px;
padding-left:30px;
width:200px;
}
.autocompleter-choices {
border: none !important;
margin-top: 5px !important;
-webkit-border-radius: 2px;
border-radius: 2px;
overflow: visible !important;
width: auto !important;
margin-left: -5px !important;
}
.autocompleter-choices li {
margin:10px !important;
background: #00ff00;
}
.autocompleter-choices {
border: none !important;
margin-top: 5px !important;
-webkit-border-radius: 2px;
border-radius: 2px;
overflow: visible !important;
width: auto !important;
margin-left: -5px !important;
}
.autocompleter-choices li {
margin:10px !important;
background: #00ff00;
}
/* PAGENAV ------------------------------------------------------------------------*/
ul.pagenav {
width: 100%;
display: block;
margin: 25px auto;
clear: left;
}
ul.pagenav li {
list-style:none outside none;
background-image: none;
margin:0;
padding:0;
}
ul.pagenav li a {
margin-top: 20px !important;
}
ul.pagenav li.previous a,
ul.pagenav li.next a {
float: left;
}
/* GLOBAL TABLE STYLES ------------------------------------------------------------------------*/
table.category th, table.category td {
padding: 5px 5px 5px 7px;
}
table.category {
width: 100%;
}
table.category th {
padding: 5px 10px 5px 0;
}
table.category th, table.category th a {
text-align: left;
font-family: "MavenProRegular", "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
}
table.category th a img {
margin-left: 5px;
}
table.category th, table.category td {
padding: 5px;
}
/* SYSTEM MESSAGES -------------------------------------------- */
.alert-info {
background-color: transparent;
border-color: transparent;
color: inherit;
}
.alert,
#system-message > dd {
text-indent: 45px;
}
.alert,
#system-message dd.message ul,
#system-message dd.error ul,
#system-message dd.warning ul,
#system-message dd.notice ul,
.bfErrorMessage {
background-position: left top !important;
border: none;
-webkit-border-radius: 7px;
border-radius: 7px;
padding-left: 0 !important;
background-color: #fff;
}
.alert,
#system-message > dd.message ul li,
#system-message > dd.error ul li,
#system-message > dd.warning ul li,
#system-message > dd.notice ul li,
.bfErrorMessage {
color: #ff3600 !important;
font-size: 14px !important;
}
.alert-heading {
color: #ff3600 !important;
font-size: 18px !important;
font-weight: bold;
}
/* TOOLTIP ----------------------------------------------------- */
.tip-wrap {
z-index: 1981 !important;
}
.tip {
padding: 5px 10px 10px 10px;
-webkit-border-radius: 2px;
border-radius: 2px;
background-repeat: no-repeat;
}
.tip-title {
display: inline-block;
font-weight: normal !important;
margin: 0 0 5px 23px;
padding: 0;
text-decoration: none;
width: auto;
font-size: 18px;
line-height: 18px;
}
.tip-text {
font-size: 12px;
}
/* BADGES --------------------------------------------------------------*/
.badge {
display: inline-block;
height: 20px;
min-width: 10px;
padding: 0 5px;
text-align: center;
line-height: 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
/* BLOG-FEATURED ------------------------------------------------------ */
.blog-featured h1 {
margin-bottom: 20px;
}
.blog-featured h2 {
margin-bottom: 10px;
}
/* BREADCRUMBS ------------------------------------------------------ */
.ol_breadcrumbs {
position: relative;
display: block;
margin: 10px;
}
.ol_breadcrumbs span, .ol_breadcrumbs a {
text-decoration: none;
font-weight: bold;
}
.ol_breadcrumbsSeparator {
display: inline-block;
height: 8px;
width: 7px !important;
background: url(../images/icon_link_arrow_small_hover.png);
background-repeat: no-repeat;
}
/* LINKS ---------------------------------------------------*/
.ol_inlineLink {
position: relative;
display: inline-block;
font-size: 12px;
font-weight: 600;
text-decoration: none;
margin: 0 5px;
padding: 0 9px 2px 0;
width: auto;
height: auto;
background-color: transparent;
background-position: center right;
background-repeat: no-repeat;
}
a.readmore,
p.readmore a,
.ol_customLink {
display:block;
font-size:12px;
font-weight:bold;
letter-spacing: 0.05em;
min-height:19px;
line-height:14px;
padding: 5px 7px 1px 7px;
position:relative;
text-decoration:none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
a.readmore,
p.readmore a {
float: left;
}
/* ERROR PAGES ---------------------------------------------------*/
.error {
padding: 20px 0;
}
#ol_errorWrapper {
display: block;
width: 800px;
margin: auto;
margin-top: 15px;
margin-bottom: 50px;
}
.errorNumber, #errorboxheader {
text-align: center;
display: block;
}
.errorNumber {
text-shadow: 1px 3px 3px rgba(0,0,0, 0.5);
font-size: 100px;
line-height: 100px;
margin-bottom: 20px;
}
#errorboxheader {
font-size: 26px;
white-space: nowrap;
}
#errorboxbody {
margin-top: 50px;
text-align: center;
}
#errorboxbody ul {
list-style: none;
}
#errorboxbody a {
position: relative;
z-index: 0;
text-decoration: none;
border: none;
font-size: 14px;
text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.6);
cursor: pointer;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background-position: right;
background-repeat: no-repeat;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-pie-box-shadow: 0 2px 0px rgba(0, 0, 0, 0.15);
height: 25px;
line-height: 22px;
padding: 4px 12px 1px 12px;
display: inline-block;
margin: 0 10px 10px 0;
}
#mailto-window { padding: 10px 20px; }
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-width : 321px)
and (max-width : 786px) {
#main .colWidth_11 img {
float: none;
}
}
/* ADMIN / EDIT ---------------------------------*/
#adminForm .tab-content {
overflow: visible;
}
#ol_errorWrapper, #ol_errorWrapper a {
color: #369;
}
body,
body.contentpane,
#errorboxheader,
#errorboxoutline {
color: #333;
}
/* BASIC ELEMENTS ------------------------------*/
a:hover,
#ol_logins li:hover a,
.ol_breadcrumbs a:hover,
a.readmore:hover,
p.readmore a:hover,
.categories-list span.item-title a:hover,
.category td a:hover,
.category th a:hover,
.registration legend,
.search-results .result-title:hover,
.search-results .result-title:hover a,
ul.circleList li,
ul.circleList li ul li,
.errorNumber
{
color: #cc0000;
}
.row > div > h1:after,
.row > div > h2:after,
.row > div > h3:after,
.row > div > h4:after,
.row > div > h5:after {
border-bottom: 1px solid #bbb;
}
I have a css issue with a media queries menu, I want the dropdown menu to be 100% width but there is a css issue on the left hand side of the menu showing a gap.
Any help would be great!!
please see fiddle here
http://jsfiddle.net/kavbE/
body {
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
color: #444;
font-size: 62.5%;
text-rendering: optimizeLegibility;
background: #fff;
}
li {
list-style: none;
}
a:link, a:visited {
color: #4083a9;
outline: none;
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #205f82;
}
#header {
width: 100%;
height: 50px;
background: #333;
background: rgba(47, 47, 47, 0.98);
z-index: 9997;
}
#header-inner {
position: relative;
margin: 0 auto;
padding: 0 12px;
max-width: 970px;
}
#logo {
float: left;
padding: 0px 20px 0 0;
}
#logo a {
display: block;
width: 82px;
height: 50px;
background-repeat: no-repeat;
background-position: 0 50%;
background-image: url(../img/assets/chartego-logo.png);
-webkit-transition: opacity 0.2s ease;
-moz-transition: opacity 0.2s ease;
-o-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
}
#logo img {
height: 0;
}
#logo a:hover {
opacity: .6;
}
#nav {
margin: 0 0px 0 20px;
color: #777;
}
#nav>li {
float: left;
font-size: 1.25em;
line-height: 1;
}
#nav>li>a {
display: block;
height: 50px;
padding: 0 10px;
line-height: 50px;
text-decoration: none;
color: #999;
}
#nav>li#user-profile {
float: right;
}
#nav>li img {
float: right;
position: relative;
top:13px;
}
#nav li ul.tabs {
width: 180px;
padding: 0 0 10px 0;
background: #333;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-border-top-left-radius: 0;
-moz-border-radius-topleft: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
z-index: 999;
}
#nav li ul.tabs li a {
display: block;
padding: 5px 15px;
font-size: 12px;
font-weight: normal;
line-height: 2;
color: #999;
background: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#nav li ul.tabs li a:hover {
color: #ddd;
background: rgba(255, 255, 255, 0.1);
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
#nav li:hover>a, #nav li>a:hover {
color: #ddd;
}
#nav li#user-profile ul.tabs li:first-child a {
font-weight: bold;
}
#toggle-nav {
display: none;
}
#nav li#user-profile span.profile-name {
display: none;
}
/* =============================================================================
NAVIGATION MEDIA MAX 800PX
========================================================================== */
#media screen and (max-width: 800px) {
#header {
position: fixed;
height: 40px;
}
#toggle-nav {
position: absolute;
top: 0;
left: 0px;
display: block;
width: 48px;
height: 40px;
text-indent: -9999px;
background-repeat: no-repeat;
background-position: 15px 50%;
background-image: url(../img/assets/icon-hamburger.png);
opacity: .5;
}
#logo a {
display: block;
height: 40px;
margin: 0 auto 0 auto;
}
#logo {
float: none;
padding-right: 0;
text-align: left;
}
#nav {
float: left;
width: 100%;
margin: 0 0 10px 0;
text-align: left;
}
#nav li {
position: relative;
float: none;
margin-right: 0;
text-align: left;
font-size: 12px;
background: rgba(47, 47, 47, 0.98);
}
#nav li ul.tabs {
display: block;
position: static;
float: none;
width: 100%;
left: 0;
margin: 0;
padding: 0;
background: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#nav li ul.tabs li a {
padding: 15px;
font-size: 12px;
font-weight: normal;
line-height: 1;
text-transform: none;
}
#nav li#user-profile {
float: none;
}
#nav li#user-profile img {
float: left;
margin: 0 8px 0 0;
}
#nav li#user-profile span.profile-name {
display: inline;
}
#nav li a:hover {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#nav li a:hover {
color: #fff;
}
#nav li ul.tabs li a:hover {
color: #999;
background: none;
}
#nav li#user-profile ul.tabs li:first-child {
display: none;
}
#header-inner {
width: auto;
padding: 0;
}
}
There's some browser-default padding on your #nav list.
Add padding: 0; to #nav and it should fix it.
I realize this question has been asked multiple times on this site, and many many others, probably too many times, I've tried many different solutions but haven't come up with one that fits, I'm trying to auto center with hidden overflow, any CSS masters willing to show me where I'm going wrong? I've been banging my head for awhile now. Here is my
fiddle Thank you for any assistance.
Here is my CSS since fiddle must be accompanied
CSS
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
}
.navigation {
position: relative;
left: 15%;
padding: 0 auto;
list-style: none;
text-align: center;
display: inline-block;
}
.navigation li {
float: left;
width: 150px;
position: relative;
}
.navigation li a {
background: #262626;
color: #fff;
display: block;
padding: 8px 7px 8px 7px;
text-decoration: none;
border-top: 1px solid #F2861D;
text-align: center;
text-transform: uppercase;
}
.navigation li a:hover {
color: #F2861D;
}
.navigation ul {
position: absolute;
left: 0;
display: none;
margin: 0 0 0 -1px;
padding: 0;
list-style: none;
border-bottom: 3px solid #F2861D;
}
.navigation ul li {
width: 150px;
border-top: none;
}
.navigation ul a {
display: block;
height: 15px;
padding: 8px 7px 13px 7px;
color: #fff;
text-decoration: none;
border-top: none;
border-bottom: 1px dashed #6B6B6B;
}
.navigation ul a:hover {
color: #F2861D;
}
This is the closest I've gotten, I've attempted margin: 0 auto as well as margin-left:auto;
margin-right:auto; but can't seem to get them to work.
try this add a .container{width:you want; margin:0 auto;} then navigation bar in center.
http://jsfiddle.net/bsyxG/7/
CSS
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
margin:0;
padding:0;
}
.container{
width:1004px;
margin:0 auto;
text-align:center;
}
.navigation {
text-align: center;
display:inline-block;
list-style-type:none;
text-align:center;
}
.navigation li {
float: left;
width: 150px;
position: relative;
}
.navigation li a {
color: #fff;
display: block;
padding: 8px 7px 8px 7px;
text-decoration: none;
border-top: 1px solid #F2861D;
background: #262626;
text-align: center;
text-transform: uppercase;
}
.navigation li a:hover {
color: #F2861D;
}
.navigation ul {
position: absolute;
left: 0;
display: none;
margin: 0 0 0 -1px;
padding: 0;
list-style: none;
border-bottom: 3px solid #F2861D;
}
.navigation ul li {
width: 150px;
border-top: none;
}
.navigation ul a {
display: block;
height: 15px;
padding: 8px 7px 13px 7px;
color: #fff;
text-decoration: none;
border-top: none;
border-bottom: 1px dashed #6B6B6B;
}
.navigation ul a:hover {
color: #F2861D;
}
You can use left: 50% left:-50% trick
.wrapper {
position: relative;
left: 50%;
}
.navigation {
position: relative;
left: -50%;
}
http://jsfiddle.net/bsyxG/4/
Use This:
Changes are position:absolute from relative and margin-left:auto; margin-right:auto
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
}
.navigation {
position: absolute;
padding: 0 auto;
list-style: none;
text-align: center;
display: inline-block;
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
.navigation li {
float: left;
width: 150px;
position: relative;
}
.navigation li a {
background: #262626;
color: #fff;
display: block;
padding: 8px 7px 8px 7px;
text-decoration: none;
border-top: 1px solid #F2861D;
text-align: center;
text-transform: uppercase;
}
.navigation li a:hover {
color: #F2861D;
}
.navigation ul {
position: absolute;
left: 0;
display: none;
margin: 0 0 0 -1px;
padding: 0;
list-style: none;
border-bottom: 3px solid #F2861D;
}
.navigation ul li {
width: 150px;
border-top: none;
}
.navigation ul a {
display: block;
height: 15px;
padding: 8px 7px 13px 7px;
color: #fff;
text-decoration: none;
border-top: none;
border-bottom: 1px dashed #6B6B6B;
}
.navigation ul a:hover {
color: #F2861D;
}