Jump to content

css edit help

bslone12

By bslone12
in CSS Help

 Share

Recommended Posts

bslone12 Newbie

bslone12

Posted
Posted

I'm not familiar enough with css to pull this off.  I am trying to change my menu to a mega menu on a script that was created by a 3rd party.  it needs to be started with the following in my php file

<div id="header-wrapper">
             <div id="header" class="navbar navbar-fixed-top"> 
             <div class="navbar-inner" >
                <div class="container">
                        
            <ul id="menu10">

the problem I am having is the div id="header" breaks my mega menu, but I need it so it will be in the right spot on the page. basically it just makes it not drop down in the right location.  like the pic called with id header which is attached.

 

post-187310-0-54226400-1447955708_thumb.png

 

If I remove the id="header" and just do a div class="navbar navbar-fixed-top" the mega menu functions correctly but is not in the correct place. the next snippet is of the header portion in my style.css any help of what I can change to make this work is appreciated. thanks in advance

#header-wrapper {
  height: 40px;
  min-width: 960px;
  background-color: #111;
  background-image: -moz-linear-gradient(top,#333333,#111111);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#333333),color-stop(1,#111111));
  background-image: -webkit-linear-gradient(#333333,#111111);
  background-image: linear-gradient(top,#333333,#111111);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#333333',EndColorStr='#111111');
}

#header {
}

#header ul li a,#header .signed-in a,#header .signed-in-notice a,#header .signed-out a,#header .signed-out-notice a {
  color: #ababab;
  font-size: 15px;
  margin-left: 5px;
  line-height: 20px;
  display: block;
  float: left;
}

#header>ul>li>a,#header .signed-in>a,#header .signed-in-notice>a {
  color: #ababab;
  font-size: 15px;
  margin-left: 5px;
  line-height: 40px;
  display: block;
  float: left;
  padding: 0 10px;
}

#header>ul>li:hover>a {
  color: #fff;
}

#header>ul>li>a.current {
  background-color: #000;
  color: #fbfbfb;
}

#header h1 {
  float: left;
  overflow: hidden;
  height: 40px;
}

#header .logo {
  float: left;
  margin-left: 0;
}

#header .logo img {
  height: 40px;
}

#header .main-pages {
  margin-left: 10px;
  float: left;
}

#header ul {
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 900;
}

#header ul li {
  position: relative;
  float: left;
}

#header .user {
  float: right;
  z-index: 100;
}

#header .signed-in {
  position: relative;
  margin: 0;
}

#header .signed-in>a {
  background: transparent url(../images/arrow-down.png) no-repeat 100% 50%;
  padding-right: 13px;
  margin-left: 0;
  margin-right: 7px;
}

#header .signed-in>a>img {
  width: 26px;
  height: 26px;
  float: left;
  margin: 6px 8px 0 0;
}

#header .signed-in>ul,#header .main-pages li ul {
  display: none;
  color: #ababab;
  position: absolute;
  top: 40px;
  width: 100%;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  background-color: #000;
  background-image: -moz-linear-gradient(top,#000000,#222222);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#000000),color-stop(1,#222222));
  background-image: -webkit-linear-gradient(#000000,#222222);
  background-image: linear-gradient(top,#000000,#222222);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#000000',EndColorStr='#222222');
}

#header .signed-in>ul {
  right: 0;
  width: 150px;
}

#header .main-pages li ul {
  width: auto;
  left: 5px;
  padding-bottom: 5px;
}

#header .signed-in>ul li,#header .main-pages li ul li {
  display: block;
  float: none;
  white-space: nowrap;
}

#header .signed-in>ul li a {
  display: block;
  padding: 0 21px 5px 12px;
  font-size: 13px;
  text-align: right;
  color: #ababab;
}

#header .main-pages li ul li a {
  display: block;
  padding: 0 10px 5px 10px;
  font-size: 13px;
  text-align: left;
  color: #fff;
}

#header .signed-in>ul li a:hover,#header .main-pages li ul li a:hover {
  color: #D1E751;
}

#header .signed-in>ul li.signout {
  border-top: solid 1px #666;
  padding: 5px 0 2px 0;
}

#header .signed-in>ul li.signout a {
  color: #fff;
}

#header .signed-in:hover,#header .main-pages li.kids:hover>a {
  background-color: #000;
}

#header .signed-in:hover>a {
  color: #fff;
  background-image: url(../images/arrow-down-on.png);
}

#header .signed-in:hover ul,#header .main-pages li:hover ul {
  display: block;
}

#header .signed-in-notice {
  float: right;
}

#header .signed-in-notice>a {
  color: #D1E751;
}

#header .signed-in-notice>a.friends {
  background-color: #D1E751;
  color: #000;
  line-height: 24px;
  border-radius: 3px;
  margin-top: 7px;
  padding: 0 5px 0 7px;
}

#header .signed-in-notice>a.friends span {
  background: url(../images/icon-tiny-friends.png) no-repeat 100% 3px;
  padding-right: 18px;
}

#header .signed-in a,#header .signed-in-notice a,#header .signed-out a,#header .signed-out-notice a {
  padding: 0 10px;
}

#header-join {
  background-color: #D1E751!important;
  color: #000!important;
  line-height: 25px!important;
  margin-top: 7px;
  border-radius: 3px;
}

#header-join:hover {
  color: #fff!important;
  background-color: #008fbb;
  background-image: -moz-linear-gradient(top,#4DBCE9,#008fbb);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#4DBCE9),color-stop(1,#008fbb));
  background-image: -webkit-linear-gradient(#4DBCE9,#008fbb);
  background-image: linear-gradient(top,#4DBCE9,#008fbb);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#4DBCE9',EndColorStr='#008fbb');
}

#header-signin {
  color: #fff!important;
  padding-top: 9px !important;
}

#header-signout {
  color: #fff!important;
  padding-top: 9px !important;
}
Link to comment
Share on other sites
bslone12 Newbie

bslone12

Posted
  • Author
Posted

disregard the previous part of the question. I have narrowed it down. I have two style sheets, one for the menu and one other in play here, this section of the header is what is causing a problem when I remove it, it displays correctly, but would like to fix it and keep it if possible.  Here is the problem code

#header ul li a,#header .signed-in a,#header .signed-in-notice a,#header .signed-out a,#header .signed-out-notice a {
  color: #ababab;
  font-size: 15px;
  margin-left: 5px;
  line-height: 20px;
  display: block;
  float: left;
}

and below is my menu.css which handles the menu

body, ul, li {
	font-size:14px; 
	font-family:Arial, Helvetica, sans-serif;
	line-height:21px;
	text-align:left;
}

#menu10 {
	list-style:none;
	width:940px;
	margin:30px auto 0px auto;
	height:43px;
	padding:0px 20px 0px 20px;

	/* Rounded Corners */
	
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;

	/* Background color and gradients */
	
	background: #014464;
	background: -moz-linear-gradient(top, #0272a7, #013953);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
	
	/* Borders */
	
	border: 1px solid #002232;

	-moz-box-shadow:inset 0px 0px 1px #edf9ff;
	-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
	box-shadow:inset 0px 0px 1px #edf9ff;
}

#menu10 li {
	float:left;
	display:block;
	text-align:center;
	position:relative;
	padding: 4px 10px 4px 10px;
	margin-right:30px;
	margin-top:7px;
	border:none;
}

#menu10 li:hover {
	border: 1px solid #777777;
	padding: 4px 9px 4px 9px;
	
	/* Background color and gradients */
	
	background: #F4F4F4;
	background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
	
	/* Rounded corners */
	
	-moz-border-radius: 5px 5px 0px 0px;
	-webkit-border-radius: 5px 5px 0px 0px;
	border-radius: 5px 5px 0px 0px;
}

#menu10 li a {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px; 
	color: #EEEEEE;
	display:block;
	outline:0;
	text-decoration:none;
	text-shadow: 1px 1px 1px #000;
}

#menu10 li:hover a {
	color:#161616;
	text-shadow: 1px 1px 1px #ffffff;
}
#menu10 li .drop {
	padding-right:21px;
	background:url("img/drop.png") no-repeat right 8px;
}
#menu10 li:hover .drop {
	background:url("img/drop.png") no-repeat right 7px;
}

.dropdown_1column, 
.dropdown_2columns, 
.dropdown_3columns, 
.dropdown_4columns,
.dropdown_5columns {
	margin:4px auto;
	float:left;
	position:absolute;
	left:-999em; /* Hides the drop down */
	text-align:left;
	padding:10px 5px 10px 5px;
	border:1px solid #777777;
	border-top:none;
	
	/* Gradient background */
	background:#F4F4F4;
	background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

	/* Rounded Corners */
	-moz-border-radius: 0px 5px 5px 5px;
	-webkit-border-radius: 0px 5px 5px 5px;
	border-radius: 0px 5px 5px 5px;
}

.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}

#menu10 li:hover .dropdown_1column, 
#menu10 li:hover .dropdown_2columns, 
#menu10 li:hover .dropdown_3columns,
#menu10 li:hover .dropdown_4columns,
#menu10 li:hover .dropdown_5columns {
	left:-1px;
	top:auto;
}

.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
	display:inline;
	float: left;
	position: relative; z-index: 100000;
	margin-left: 5px;
	margin-right: 5px;
}
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}

#menu10 .menu_right {
	float:right;
	margin-right:0px;
}
#menu10 li .align_right {
	/* Rounded Corners */
	-moz-border-radius: 5px 0px 5px 5px;
    -webkit-border-radius: 5px 0px 5px 5px;
    border-radius: 5px 0px 5px 5px;
}

#menu10 li:hover .align_right {
	left:auto;
	right:-1px;
	top:auto;
}

#menu10 p, #menu10 h2, #menu10 h3, #menu10 ul li {
	font-family:Arial, Helvetica, sans-serif;
	line-height:21px;
	font-size:12px;
	text-align:left;
	text-shadow: 1px 1px 1px #FFFFFF;
}
#menu10 h2 {
	font-size:21px;
	font-weight:400;
	letter-spacing:-1px;
	margin:7px 0 14px 0;
	padding-bottom:14px;
	border-bottom:1px solid #666666;
}
#menu10 h3 {
	font-size:14px;
	margin:7px 0 14px 0;
	padding-bottom:7px;
	border-bottom:1px solid #888888;
}
#menu10 p {
	line-height:18px;
	margin:0 0 10px 0;
}

#menu10 li:hover div a {
	font-size:12px;
	color:#015b86;
}
#menu10 li:hover div a:hover {
	color:#029feb;
}


.strong {
	font-weight:bold;
}
.italic {
	font-style:italic;
}

.imgshadow { /* Better style on light background */
	background:#FFFFFF;
	padding:4px;
	border:1px solid #777777;
	margin-top:5px;
	-moz-box-shadow:0px 0px 5px #666666;
	-webkit-box-shadow:0px 0px 5px #666666;
	box-shadow:0px 0px 5px #666666;
}
.img_left { /* Image sticks to the left */
	width:auto;
	float:left;
	margin:5px 15px 5px 5px;
}

#menu10 li .black_box {
	background-color:#333333;
	color: #eeeeee;
	text-shadow: 1px 1px 1px #000;
	padding:4px 6px 4px 6px;

	/* Rounded Corners */
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;

	/* Shadow */
	-webkit-box-shadow:inset 0 0 3px #000000;
	-moz-box-shadow:inset 0 0 3px #000000;
	box-shadow:inset 0 0 3px #000000;
}

#menu10 li ul {
	list-style:none;
	padding:0;
	margin:0 0 12px 0;
}
#menu10 li ul li {
	font-size:12px;
	line-height:24px;
	position:relative;
	text-shadow: 1px 1px 1px #ffffff;
	padding:0;
	margin:0;
	float:none;
	text-align:left;
	width:130px;
}
#menu10 li ul li:hover {
	background:none;
	border:none;
	padding:0;
	margin:0;
}

#menu10 li .greybox li {
	background:#F4F4F4;
	border:1px solid #bbbbbb;
	margin:0px 0px 4px 0px;
	padding:4px 6px 4px 6px;
	width:116px;

	/* Rounded Corners */
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}
#menu10 li .greybox li:hover {
	background:#ffffff;
	border:1px solid #aaaaaa;
	padding:4px 6px 4px 6px;
	margin:0px 0px 4px 0px;
}
ol {
    -moz-column-count: 2;
    -moz-column-gap: 200px;
    -webkit-column-count: 2;
    -webkit-column-gap: 200px;
    column-count: 2;
    column-gap: 200px;
}
Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.