[Plugin: WP-PageNavi] Backgound of bar is wider that page layout – how to limit

Resolved

(@awebber)

This is an image of the top of page Image of page top

The top black block is an image that is the header.

This is the pagenavi-css – standard

.wp-pagenavi{padding:5px 0;border-top:1px solid #ddd;}
.wp-pagenavi a {
	padding:5px 7px;
	text-decoration:none;
	border:1px solid #f7f7f7;
}
.wp-pagenavi a:hover {
	background:#f7f7f7;
	border:1px solid #f7f7f7;
	text-decoration:none;
}
.wp-pagenavi span.pages {
	padding:1px 7px 1px 22px !important;
	padding:2px 7px 2px 22px;
	height:16px;
	line-height:16px;
}
*+html .wp-pagenavi span.pages {
	padding:2px 7px 2px 22px !important;
}
.wp-pagenavi span.current {
	background:#f7f7f7;
	padding:5px 7px;
	border:1px solid #f7f7f7;
	font-weight:bold;
}
.wp-pagenavi span.extend {
	padding:2px 4px;

This is the section of the style css

/* #nav */
#nav{z-index:5;position:relative;text-align:center;height:31px;margin:padding-top:20px;clear:both;background:#454546;}
#menus{width:700px;height:31px;margin:0 auto;padding-right:260px;font-size:14px;text-shadow:0 1px 0 #000;}
#menus a{border:1px solid #555;border-bottom:none;color:#abaaaa;display:block;line-height:30px;background:#333;padding:0 10px;}
#menus ul{list-style:none;margin:0;}
#menus li{float:left;position:relative;margin-right:8px;}
#menus li:hover > a{background:#222;color:#fff;}
#menus ul li.current_page_item > a,
#menus ul li.current-menu-ancestor > a,
#menus ul li.current-menu-item > a,
#menus ul li.current-menu-parent > a{background:#f7f7f7;color:#333;text-shadow:0 1px 0 #fff;}
#menus ul li.current_page_item:hover > a,
#menus ul li.current-menu-ancestor:hover > a,
#menus ul li.current-menu-item:hover > a,
#menus ul li.current-menu-parent:hover > a{background:#222;color:#fff;text-shadow:0 1px 0 #000;}
#menus ul li:hover > ul{display:block;}
#menus ul ul a{background:#222;width:160px;height:auto;}
#menus ul ul{display:none;position:absolute;top:31px;left:0;float:left;width:150px;z-index:99999;}
#menus ul ul li{min-width:150px;}
#menus ul ul ul{left:100%;top:0;}

The bar – background:#454546 – is what I want to line up with the header image and not extend past the page and sidebar boarder.

If I assign a Width – say 700 the bar aligns left as the CSS says but ends at half page width – if I delete “float left” it does not help

Thanks for any help – have used HTML for years but new to WP

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

Clayton James
(@claytonjames)

13 years, 2 months ago

I think WP-PageNavi is supposed to be installed in the footer.

[edit]… the theme you have pictured in your screen shot – I think it’s zBench? – is already WP-PageNavi capable. All you need to do is install the plugin and activate it, and the page navigation will automatically show at the bottom.

Thread Starter awebber
(@awebber)

13 years, 2 months ago

Thanks

The page nav is working fine as you can see there is a Home page and a T page – it is just that the background runs the full width of the browser – but I want it ti not go beyond the layout of the page width

Clayton James
(@claytonjames)

13 years, 2 months ago

What does that have to do with all the WP-PageNavi plugin code you posted? Maybe it will make more sense of you look at what the WP-PageNavi plugin is. http://wordpress.org/extend/plugins/wp-pagenavi/

I think what you might be after is this.

/* #nav */
#nav{z-index:5;position:relative;height:31px;margin:0 auto;padding-top:20px;clear:both;background:#454546; width: 960px;}

Try adding a width of 960px like I did above, and see if that does what you want it to.

Thread Starter awebber
(@awebber)

13 years, 2 months ago

Thanks Clayton – as I wrote – I tried to add exactly what you suggested but the background now ends center of page and still starts way to the left of the page

Image with Width set

I could use the Ozh’ Admin Drop Down Menu as I have it on another site but like the tabs look layout of the pagenavi and just need to solve this problem so it lines up with the page boundaries like the top header image does.

I want the background black bar of the menu to be a fixed width so if you expand the browser it does not run outside the boarder.

Clayton James
(@claytonjames)

13 years, 2 months ago

You must have something else that’s causing the issue.I suspect it is because you may have removed or altered the search and header div’s. When I make the change I mentioned above to my copy of the theme, it does exactly what you want it to do…

I want the background black bar of the menu to be a fixed width so if you expand the browser it does not run outside the boarder.

The nav background stays constant width, and center aligned, regardless of the browser window size. I have no idea what Ozh’ Admin Drop Down Menu would have to do with the issue.

What exactly is that black bar at the top of your screen shot that you are trying to modify? Is it something you added to the header? because what I added the 960px width to, is not an image.

Thread Starter awebber
(@awebber)

13 years, 2 months ago

Thanks Clayton – I had removed search but replacing it alone did not help so I replaced styles.css and header then redid my changes and it works so I must have damaged some code the first time with an accidental delete of something.

–the black bar at the top is part of my header image

– right the 960 is the background color or the menu bar and it now lines up with my 960 width top header image and page size

thanks for your help

Clayton James
(@claytonjames)

13 years, 2 months ago

Glad to hear you got it working.

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

The topic ‘[Plugin: WP-PageNavi] Backgound of bar is wider that page layout – how to limit’ is closed to new replies.