Jump to content

Superfish Navbar Width problems

nerd99

By nerd99
in CSS Help

 Share

Recommended Posts

nerd99 Member

nerd99

Posted
Posted

Hi,

 

I'm trying to adapt the superfish navbar menu navigation to my site. I have a long, narrow div that I want this to fit into but I can't work out how to make it fit the div. I've tried increasing the padding-right of the list anchor but that causes a horizontal scroll in the browser because of the overflow and I don't want that.

 

There is probably something really simple I'm missing. Can anybody help?

 

superfish-navbar.css

/*** adding the class sf-navbar in addition to sf-menu creates an all-horizontal nav-bar menu ***/
.sf-navbar {
        background:             #BDD2FF;
        height:                 2.5em;
        padding-bottom: 2.5em;
        position:               relative;
}
.sf-navbar li {
        background:             #AABDE6;
        position:               static;
}
.sf-navbar a {
        border-top:             none;
}
.sf-navbar li ul {
        width:                  44em; /*IE6 soils itself without this*/
}
.sf-navbar li li {
        background:             #BDD2FF;
        position:               relative;
}
.sf-navbar li li ul {
        width:                  13em;
}
.sf-navbar li li li {
        width:                  100%;
}
.sf-navbar ul li {
        width:                  auto;
        float:                  left;
}
.sf-navbar a, .sf-navbar a:visited {
        border:                 none;
}
.sf-navbar li.current {
        background:             #BDD2FF;
}
.sf-navbar li:hover,
.sf-navbar li.sfHover,
.sf-navbar li li.current,
.sf-navbar a:focus, .sf-navbar a:hover, .sf-navbar a:active {
        background:             #BDD2FF;
}
.sf-navbar ul li:hover,
.sf-navbar ul li.sfHover,
ul.sf-navbar ul li:hover li,
ul.sf-navbar ul li.sfHover li,
.sf-navbar ul a:focus, .sf-navbar ul a:hover, .sf-navbar ul a:active {
        background:             #D1DFFF;
}
ul.sf-navbar li li li:hover,
ul.sf-navbar li li li.sfHover,
.sf-navbar li li.current li.current,
.sf-navbar ul li li a:focus, .sf-navbar ul li li a:hover, .sf-navbar ul li li a:active {
        background:             #E6EEFF;
}
ul.sf-navbar .current ul,
ul.sf-navbar ul li:hover ul,
ul.sf-navbar ul li.sfHover ul {
        left:                   0;
        top:                    2.5em; /* match top ul list item height */
}
ul.sf-navbar .current ul ul {
        top:                    -999em;
}

.sf-navbar li li.current > a {
        font-weight:    bold;
}

/*** point all arrows down ***/
/* point right for anchors in subs */
.sf-navbar ul .sf-sub-indicator { background-position: -10px -100px; }
.sf-navbar ul a > .sf-sub-indicator { background-position: 0 -100px; }
/* apply hovers to modern browsers */
.sf-navbar ul a:focus > .sf-sub-indicator,
.sf-navbar ul a:hover > .sf-sub-indicator,
.sf-navbar ul a:active > .sf-sub-indicator,
.sf-navbar ul li:hover > a > .sf-sub-indicator,
.sf-navbar ul li.sfHover > a > .sf-sub-indicator {
        background-position: -10px -100px; /* arrow hovers for modern browsers*/
}

/*** remove shadow on first submenu ***/
.sf-navbar > li > ul {
        background: transparent;
        padding: 0;
        -moz-border-radius-bottomleft: 0;
        -moz-border-radius-topright: 0;
        -webkit-border-top-right-radius: 0;
        -webkit-border-bottom-left-radius: 0;
}

 

The above css is in addition to the following...

superfish.css

/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
margin:			0;
padding:		0;
list-style:		none;
}
.sf-menu {
line-height:	1.5;
}
.sf-menu ul {
position:		absolute;
top:			-999em;
width:			10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
width:			100%;
}
.sf-menu li:hover {
visibility:		inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
float:			left;
position:		relative;
}
.sf-menu a {
display:		block;
position:		relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left:			0;
top:			2.5em; /* match top ul list item height */
z-index:		99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
top:			-999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
left:			10em; /* match ul width */
top:			0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
top:			-999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
left:			10em; /* match ul width */
top:			0;
}

/*** DEMO SKIN ***/
.sf-menu {
float:			left;
margin-bottom:	1em;
width:100%;
}
.sf-menu a {
border-left:	1px solid #fff;
border-top:		1px solid #CFDEFF;
padding: 		.75em 1em;
text-decoration:none;
}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
color:			#13a;
}
.sf-menu li {
background:		#BDD2FF;
}
.sf-menu li li {
background:		#AABDE6;
}
.sf-menu li li li {
background:		#9AAEDB;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
background:		#CFDEFF;
outline:		0;
}

/*** arrows **/
.sf-menu a.sf-with-ul {
padding-right: 	0em; /* CHANGE THIS FOR TOP MENU WIDTH!!!!!!!! */
min-width:		183px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
position:		absolute;
display:		block;
right:			.75em;
top:			1.05em; /* IE6 only */
width:			10px;
height:			10px;
text-indent: 	-999em;
overflow:		hidden;
background:		url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator {  /* give all except IE6 the correct values */
top:			.8em;
background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
background-position: -10px -100px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/*** shadows for all but IE6 ***/
.sf-shadow ul {
background:	url('../images/shadow.png') no-repeat bottom right;
padding: 0 8px 9px 0;
-moz-border-radius-bottomleft: 17px;
-moz-border-radius-topright: 17px;
-webkit-border-top-right-radius: 17px;
-webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off {
background: transparent;
}

 

The div I am trying to fit the navbar into is described in my main css file as

#contentnav{ 
position: relative; 
top:10px;
height: 50px;
background-color:#fff;
margin:10px;
border: 1px solid red;
}

 

Markup is as follows:

<div id="contentnav">
   				<ul id="sample-menu-4" class="sf-menu sf-navbar">
				<li class="current">
					<a class="sf-with-ul" href="#">Menu1<span class="sf-sub-indicator"> &#187;</span></a>
					<ul>
						<li><a href="#">Sub1</a></li>
						<li><a href="#">Sub2</a></li>
						<li><a href="#">Sub3</a></li>

					</ul>
				</li>
				<li>
					<a class="sf-with-ul" href="#">Menu2<span class="sf-sub-indicator"> &#187;</span></a>
					<ul>
						<li><a href="#">Sub1</a></li>
						<li><a href="#">Sub2</a></li>
						<li><a href="#">Sub3</a></li>

					</ul>
				</li>
				<li>
					<a class="sf-with-ul" href="#">Menu3<span class="sf-sub-indicator"> &#187;</span></a>
					<ul>
						<li><a href="#">Sub1</a></li>
						<li><a href="#">Sub2</a></li>
						<li><a href="#">Sub3</a></li>

					</ul>
				</li>

					<li><a class="sf-with-ul" href="#">Menu4="sf-sub-indicator"> &#187;</span></a>
					<ul>
						<li><a href="#">Sub1</a></li>
						<li><a href="#">Sub2</a></li>
						<li><a href="#">Sub3</a></li>

					</ul>
				</li>
			</ul>
   					
   			
   			</div><!-- end contentnav -->

 

 

 

Thanks

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.