Getting nav button to extend further

  • leebah

    (@leebah)


    13 years, 10 months ago

    I’m creating a child theme based off of twenty ten. I’ve added additional css code so that the last item in the navigation menu has a blue background. The navigation menu bar is orange except for that. The problem I have is that there is some padding or margin (that I can’t find) that seems to be messing me up so that the menu bar is orange, then blue button, then about 5px of orange peeking out the right side.

    #access {
	background: #e37a25;
	display: block;
	float: right;
	margin: 6px auto;
	width: 635px;
}
#access .menu-header,
div.menu {
	font-size: 14px;
	margin-left: 12px;
	width: 620px;

}
#access .menu-header ul,
div.menu ul {
	list-style: none;
	margin: 0;

}

#access .menu-header li,
div.menu li {
	float: left;
	position: relative;
}
#access a {
	color: #fff;
	display: block;
	line-height: 38px;
	padding: 0 10px 0 10px;
	text-decoration: none;
}
#access ul ul {
	box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	display: none;
	position: absolute;
	top: 38px;
	left: 0;
	float: left;
	width: 180px;
	z-index: 99999;
}
#access ul ul li {
	min-width: 180px;
}
#access ul ul ul {
	left: 100%;
	top: 0;
}
#access ul ul a {
	background: #333;
	line-height: 1em;
	padding: 10px;
	width: 160px;
	height: auto;
}
#access li:hover > a,
#access ul ul :hover > a {
	background: #140958;
	color: #fff;
}
#access ul li:hover > ul {
	display: block;
}
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
	color: #fff;
background: #140958;
}
* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
	color: #fff;

}

.page-item-16 {
background: #344da1;

}

    Any help figuring this out would be appreciated

Viewing 12 replies - 1 through 12 (of 12 total)
  • D M

    (@eloquentbohemian)

    13 years, 10 months ago

    url to site, please?

    Thread Starter leebah

    (@leebah)

    13 years, 10 months ago

    The site url won’t help because I have a under construction plugin on. Is there a way to upload a picture (assuming you want to see what it looks like) or a file (view source and css file) to the forum posts?

    D M

    (@eloquentbohemian)

    13 years, 10 months ago

    Actually, if you look at the CSS, the #access has a width of 635px and the .menu-header and div.menu both have a width of 620px plus a left margin of 12px, which is a total of 632px… 4px on the right side less than the 635px of the #access.
    Perhaps, here lies your problem?

    Thread Starter leebah

    (@leebah)

    13 years, 10 months ago

    I tried changing it but it still didn’t work.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    13 years, 10 months ago

    This is difficult to solve without visual aids

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    13 years, 10 months ago

    Actually can you show the HTML as well?

    Thread Starter leebah

    (@leebah)

    13 years, 10 months ago

    Here is a link to the screen shot
    http://flickr.com/gp/poetryinyarn/SVrM8z
    Here is the html

    <!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="UTF-8" />
<title>HOME | YMHaD</title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="http://www.alizanugieldesigns.com/ymhad/wordpress/wp-content/themes/customofftwentyten/style.css" />
<link rel="pingback" href="http://www.alizanugieldesigns.com/ymhad/wordpress/xmlrpc.php" />
<link rel="alternate" type="application/rss+xml" title="YMHaD &raquo; Feed" href="http://www.alizanugieldesigns.com/ymhad/wordpress/?page_id=53/?feed=rss2" />
<link rel="alternate" type="application/rss+xml" title="YMHaD &raquo; Comments Feed" href="http://www.alizanugieldesigns.com/ymhad/wordpress/?page_id=53/?feed=comments-rss2" />
<link rel="alternate" type="application/rss+xml" title="YMHaD &raquo; HOME Comments Feed" href="http://www.alizanugieldesigns.com/ymhad/wordpress/?page_id=53/?feed=rss2&page_id=53" />
<link rel='stylesheet' id='admin-bar-css'  href='http://www.alizanugieldesigns.com/ymhad/wordpress/wp-includes/css/admin-bar.css?ver=3.4.1' type='text/css' media='all' />
<script type='text/javascript' src='http://www.alizanugieldesigns.com/ymhad/wordpress/wp-includes/js/comment-reply.js?ver=3.4.1'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.alizanugieldesigns.com/ymhad/wordpress/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.alizanugieldesigns.com/ymhad/wordpress/wp-includes/wlwmanifest.xml" />
<link rel='prev' title='CONTACT US' href='http://www.alizanugieldesigns.com/ymhad/wordpress/?page_id=53/?page_id=37' />
<meta name="generator" content="WordPress 3.4.1" />
<link rel='canonical' href='http://www.alizanugieldesigns.com/ymhad/wordpress/?page_id=53/?page_id=53' />

<!-- Google Fonts -->
<link href='http://fonts.googleapis.com/css?family=Yanone Kaffeesatz' rel='stylesheet' type='text/css' />
<style type="text/css" media="screen">
h1 { font-family: 'Yanone Kaffeesatz', arial, serif; }
h2 { font-family: 'Yanone Kaffeesatz', arial, serif; }
h3 { font-family: 'Yanone Kaffeesatz', arial, serif; }
h4 { font-family: 'Yanone Kaffeesatz', arial, serif; }
h5 { font-family: 'Yanone Kaffeesatz', arial, serif; }
h6 { font-family: 'Yanone Kaffeesatz', arial, serif; }
body 				{ font-family: 'Yanone Kaffeesatz', arial, serif; }
p 					{ font-family: 'Yanone Kaffeesatz', arial, serif; }
blockquote 	{ font-family: 'Yanone Kaffeesatz', arial, serif; } 

</style>
<!-- fonts delivered by WordPress Google Fonts, a plugin by Adrian3.com -->

<style type="text/css" media="print">#wpadminbar { display:none; }</style>
<style type="text/css" media="screen">
	html { margin-top: 28px !important; }
	* html body { margin-top: 28px !important; }
</style>
<style type="text/css" id="custom-background-css">
body.custom-background { background-color: #f1f1f1; }
</style>
</head>

<body class="page page-id-53 page-template-default logged-in admin-bar custom-background">
<div id="wrapper" class="hfeed">

		<div id="primary" class="widget-area" role="complementary">
			<ul class="xoxo">

<li id="text-3" class="widget-container widget_text">			<div class="textwidget"><img src="http://www.alizanugieldesigns.com/ymhad/wordpress/wp-content/uploads/2012/07/HP-Logo.gif" />

Sed at orci eu mauris iaculis pellentesque. Vivamus vulputate felis convallis tellus suscipit vitae rhoncus metus placerat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus interdum dolor cursus urna pharetra scelerisque vel eget nisi. Quisque blandit facilisis elit non gravida. Etiam id augue sit amet lacus imperdiet pretium. Sed vel nisl at sapien cursus venenatis adipiscing sit amet leo. Sed ornare congue lorem, vitae condimentum diam pulvinar eget. Integer sit amet imperdiet lectus. Morbi mollis sodales odio. Pellentesque odio purus, tempor non molestie et, tempor at eros. </div>
		</li>			</ul>
		</div><!-- #primary .widget-area -->

<div id="header">
		<div id="masthead">
			<div id="branding" role="banner">

										<img src="http://www.alizanugieldesigns.com/ymhad/wordpress/wp-content/uploads/2012/07/HP-Banner635x143.png" width="635" height="143" alt="" />
								</div><!-- #branding -->

			<div id="access" role="navigation">
			  				<div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div>
								<div class="menu"><ul><li class="page_item page-item-53 current_page_item"><a href="http://www.alizanugieldesigns.com/ymhad/wordpress/?page_id=53/?page_id=53">HOME</a></li><li class="page_item page-item-7"><a href="http://www.alizanugieldesigns.com/ymhad/wordpress/?page_id=53/?page_id=7">OVERVIEW</a></li><li class="page_item page-item-9"><a href="http://www.alizanugieldesigns.com/ymhad/wordpress/?page_id=53/?page_id=9">KEHILA</a></li><li class="page_item page-item-11"><a href="http://www.alizanugieldesigns.com/ymhad/wordpress/?page_id=53/?page_id=11">ROSH HAYESHIVA</a></li><li class="page_item page-item-14"><a href="http://www.alizanugieldesigns.com/ymhad/wordpress/?page_id=53/?page_id=14">APPLY</a></li><li class="page_item page-item-31"><a href="http://www.alizanugieldesigns.com/ymhad/wordpress/?page_id=53/?page_id=31">CALENDAR</a></li><li class="page_item page-item-33"><a href="http://www.alizanugieldesigns.com/ymhad/wordpress/?page_id=53/?page_id=33">PHOTOS & VIDEOS</a></li><li class="page_item page-item-37"><a href="http://www.alizanugieldesigns.com/ymhad/wordpress/?page_id=53/?page_id=37">CONTACT US</a></li><li class="page_item page-item-16"><a href="http://www.alizanugieldesigns.com/ymhad/wordpress/?page_id=53/?page_id=16">DONATION OPTIONS</a></li></ul></div>
			</div><!-- #access -->
		</div><!-- #masthead -->
	</div><!-- #header -->

	<div id="main">
		<div id="container">
			<div id="content" role="main">

				<div id="post-53" class="post-53 page type-page status-publish hentry">
											<h1 class="entry-title">HOME</h1>

					<div class="entry-content">
						<p>home page info</p>
												<span class="edit-link"><a class="post-edit-link" href="http://www.alizanugieldesigns.com/ymhad/wordpress/wp-admin/post.php?post=53&action=edit" title="Edit Page">Edit</a></span>					</div><!-- .entry-content -->
				</div><!-- #post-## -->

			<div id="comments">

	<p class="nocomments">Comments are closed.</p>

</div><!-- #comments -->

			</div><!-- #content -->
		</div><!-- #container -->

	</div><!-- #main -->

	<div id="footer" role="contentinfo">
		<div id="colophon">

			<div id="footer-widget-area" role="complementary">

				<div id="first" class="widget-area">
					<ul class="xoxo">
						<li id="text-2" class="widget-container widget_text"><h3 class="widget-title">Footer Area</h3>			<div class="textwidget"></div>
		</li>					</ul>
				</div><!-- #first .widget-area -->

			</div><!-- #footer-widget-area -->

			<div id="site-info">

			</div><!-- #site-info -->

		</div><!-- #colophon -->
	</div><!-- #footer -->

</div><!-- #wrapper -->

<script type='text/javascript' src='http://www.alizanugieldesigns.com/ymhad/wordpress/wp-includes/js/admin-bar.js?ver=3.4.1'></script>
	<script type="text/javascript">
		(function() {
			var request, b = document.body, c = 'className', cs = 'customize-support', rcs = new RegExp('(^|\\s+)(no-)?'+cs+'(\\s+|$)');

			request = true;

			b[c] = b[c].replace( rcs, '' );
			b[c] += ( window.postMessage && request ? ' ' : ' no-' ) + cs;
		}());
	</script>
			<div id="wpadminbar" class="nojq nojs" role="navigation">
			<div class="quicklinks">
				<ul id="wp-admin-bar-root-default" class="ab-top-menu">
		<li id="wp-admin-bar-wp-logo" class="menupop"><a class="ab-item" tabindex="10" aria-haspopup="true" href="http://www.alizanugieldesigns.com/ymhad/wordpress/wp-admin/about.php" title="About WordPress"><span class="ab-icon"></span></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-wp-logo-default" class="ab-submenu">
		<li id="wp-admin-bar-about" class=""><a class="ab-item" tabindex="10" href="http://www.alizanugieldesigns.com/ymhad/wordpress/wp-admin/about.php">About WordPress</a>		</li></ul><ul id="wp-admin-bar-wp-logo-external" class="ab-sub-secondary ab-submenu">
		<li id="wp-admin-bar-wporg" class=""><a class="ab-item" tabindex="10" href="http://wordpress.org/">WordPress.org</a>		</li>
		<li id="wp-admin-bar-documentation" class=""><a class="ab-item" tabindex="10" href="http://codex.wordpress.org/">Documentation</a>		</li>
		<li id="wp-admin-bar-support-forums" class=""><a class="ab-item" tabindex="10" href="http://wordpress.org/support/">Support Forums</a>		</li>
		<li id="wp-admin-bar-feedback" class=""><a class="ab-item" tabindex="10" href="http://wordpress.org/support/forum/requests-and-feedback">Feedback</a>		</li></ul></div>		</li>
		<li id="wp-admin-bar-site-name" class="menupop"><a class="ab-item" tabindex="10" aria-haspopup="true" href="http://www.alizanugieldesigns.com/ymhad/wordpress/wp-admin/">YMHaD</a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-site-name-default" class="ab-submenu">
		<li id="wp-admin-bar-dashboard" class=""><a class="ab-item" tabindex="10" href="http://www.alizanugieldesigns.com/ymhad/wordpress/wp-admin/">Dashboard</a>		</li></ul><ul id="wp-admin-bar-appearance" class=" ab-submenu">
		<li id="wp-admin-bar-themes" class=""><a class="ab-item" tabindex="10" href="http://www.alizanugieldesigns.com/ymhad/wordpress/wp-admin/themes.php">Themes</a>		</li>
		<li id="wp-admin-bar-customize" class=" hide-if-no-customize"><a class="ab-item" tabindex="10" href="http://www.alizanugieldesigns.com/ymhad/wordpress/wp-admin/customize.php?url=http%3A%2F%2Fwww.alizanugieldesigns.com%2Fymhad%2Fwordpress%2F%3Fpage_id%3D53%2F">Customize</a>		</li>
		<li id="wp-admin-bar-widgets" class=""><a class="ab-item" tabindex="10" href="http://www.alizanugieldesigns.com/ymhad/wordpress/wp-admin/widgets.php">Widgets</a>		</li>
		<li id="wp-admin-bar-menus" class=""><a class="ab-item" tabindex="10" href="http://www.alizanugieldesigns.com/ymhad/wordpress/wp-admin/nav-menus.php">Menus</a>		</li>
		<li id="wp-admin-bar-background" class=""><a class="ab-item" tabindex="10" href="http://www.alizanugieldesigns.com/ymhad/wordpress/wp-admin/themes.php?page=custom-background">Background</a>		</li>
		<li id="wp-admin-bar-header" class=""><a class="ab-item" tabindex="10" href="http://www.alizanugieldesigns.com/ymhad/wordpress/wp-admin/themes.php?page=custom-header">Header</a>		</li></ul></div>		</li>
		<li id="wp-admin-bar-comments" class=""><a class="ab-item" tabindex="10" href="http://www.alizanugieldesigns.com/ymhad/wordpress/wp-admin/edit-comments.php" title="0 comments awaiting moderation"><span class="ab-icon"></span><span id="ab-awaiting-mod" class="ab-label awaiting-mod pending-count count-0">0</span></a>		</li>
		<li id="wp-admin-bar-new-content" class="menupop"><a class="ab-item" tabindex="10" aria-haspopup="true" href="http://www.alizanugieldesigns.com/ymhad/wordpress/wp-admin/post-new.php" title="Add New"><span class="ab-icon"></span><span class="ab-label">New</span></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-new-content-default" class="ab-submenu">
		<li id="wp-admin-bar-new-post" class=""><a class="ab-item" tabindex="10" href="http://www.alizanugieldesigns.com/ymhad/wordpress/wp-admin/post-new.php">Post</a>		</li>
		<li id="wp-admin-bar-new-media" class=""><a class="ab-item" tabindex="10" href="http://www.alizanugieldesigns.com/ymhad/wordpress/wp-admin/media-new.php">Media</a>		</li>
		<li id="wp-admin-bar-new-link" class=""><a class="ab-item" tabindex="10" href="http://www.alizanugieldesigns.com/ymhad/wordpress/wp-admin/link-add.php">Link</a>		</li>
		<li id="wp-admin-bar-new-page" class=""><a class="ab-item" tabindex="10" href="http://www.alizanugieldesigns.com/ymhad/wordpress/wp-admin/post-new.php?post_type=page">Page</a>		</li>
		<li id="wp-admin-bar-new-user" class=""><a class="ab-item" tabindex="10" href="http://www.alizanugieldesigns.com/ymhad/wordpress/wp-admin/user-new.php">User</a>		</li></ul></div>		</li>
		<li id="wp-admin-bar-edit" class=""><a class="ab-item" tabindex="10" href="http://www.alizanugieldesigns.com/ymhad/wordpress/wp-admin/post.php?post=53&action=edit">Edit Page</a>		</li></ul><ul id="wp-admin-bar-top-secondary" class="ab-top-secondary ab-top-menu">
		<li id="wp-admin-bar-search" class=" admin-bar-search"><div class="ab-item ab-empty-item" tabindex="-1"><form action="http://www.alizanugieldesigns.com/ymhad/wordpress/?page_id=53/" method="get" id="adminbarsearch"><input class="adminbar-input" name="s" id="adminbar-search" tabindex="10" type="text" value="" maxlength="150" /><input type="submit" class="adminbar-button" value="Search"/></form></div>		</li>
		<li id="wp-admin-bar-my-account" class="menupop with-avatar"><a class="ab-item" tabindex="10" aria-haspopup="true" href="http://www.alizanugieldesigns.com/ymhad/wordpress/wp-admin/profile.php" title="My Account">Howdy, admin<img alt='' src='http://1.gravatar.com/avatar/d9c0b39b3d091339e0cb43684ccb3343?s=16&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D16&r=G' class='avatar avatar-16 photo' height='16' width='16' /></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-user-actions" class=" ab-submenu">
		<li id="wp-admin-bar-user-info" class=""><a class="ab-item" tabindex="-1" href="http://www.alizanugieldesigns.com/ymhad/wordpress/wp-admin/profile.php"><img alt='' src='http://1.gravatar.com/avatar/d9c0b39b3d091339e0cb43684ccb3343?s=64&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D64&r=G' class='avatar avatar-64 photo' height='64' width='64' /><span class='display-name'>admin</span></a>		</li>
		<li id="wp-admin-bar-edit-profile" class=""><a class="ab-item" tabindex="10" href="http://www.alizanugieldesigns.com/ymhad/wordpress/wp-admin/profile.php">Edit My Profile</a>		</li>
		<li id="wp-admin-bar-logout" class=""><a class="ab-item" tabindex="10" href="http://www.alizanugieldesigns.com/ymhad/wordpress/wp-login.php?action=logout&_wpnonce=499f877348">Log Out</a>		</li></ul></div>		</li></ul>			</div>
		</div>

		</body>
</html>

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    13 years, 10 months ago

    In style.css line 387, you have this
    #access .menu-header, div.menu
    Remove margin-left
    Change width to 635px

    To the last list item in the navigation, add

    padding-right: 21px

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    13 years, 10 months ago

    Careful of padding, it may be treated differently in older IE versions

    Thread Starter leebah

    (@leebah)

    13 years, 10 months ago

    That just pushed “donation options” down to the next line.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    13 years, 10 months ago

    Fiddle around with the padding so it’s correct on your browser.
    If you want cross-browser compatibility, you’ll need to mess around with the list items’ (within the navigation) margins.

    Thread Starter leebah

    (@leebah)

    13 years, 10 months ago

    yeah, i guess i’ll have to do that. the padding works well for firefox, but displays differently when I check in IE. thanks for all your help!

Viewing 12 replies - 1 through 12 (of 12 total)

The topic ‘Getting nav button to extend further’ is closed to new replies.