Topic: Trying to place div element at top behind admin bar in Buddypress · BuddyPress.org

Skip to:: Content; Pages; Categories; Search; Top; Bottom

Trying to place div element at top behind admin bar in Buddypress

@jim2112

Participant

14 years, 9 months ago

CSS beginner here.

I have an existing WP site that has a fixed position <div> at the top 0 margin that is set to 100% width. It has some links in it to other pages. It’s 22 pixs in height and populated by a repeating background image 5 x 22 pixs. I would like to carry over this to my buddypress site as well. I was hoping to place it behind the admin bar. Then remove the admin bar image to make it clear so that the admin bar text sits on top of my other bar element.

I can get a my div behind the admin bar but when i set it to 100% width it won’t go beyond the confines of the box that the admin bar is sitting in. I can’t figure out why my div element is being restricted in width.

I’m guessing this is something simple for someone who knows CSS.

I’m thinking this <body <?php body_class() ?> id=”bp-default”>

is somehow defining the max width of all DIV elements on the page?

Can anyone help me?

Thanks

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

@modemlooper

Moderator

14 years, 9 months ago

You are going to have to give a link to this site as there is no way to tell where you’ve placed your div.

@jim2112

Participant

14 years, 9 months ago

Thanks for the reply Modemlooper,

My page is not currently up.

I am trying to modify BuddyPress Default 1.2.3.

Here is part of header.php:

“</head>

<body <?php body_class() ?> id=”bp-default”>

<div id=”topbar”></div>

<?php do_action( ‘bp_before_header’ ) ?>

<div id=”header”>”

the Div I want to add is #topbar

#topbar {

background-color: #FFFF00;

width: 100%;

height: 22px;

margin: 0px auto 0px auto;

}

I can get it behind the admin bar but I can’t get to go to 100% of the browser. Width wise it will only go as wide as the admin bar.

for now I just set the background property to a color for testing.

Ideally I would like my div element to go 100% of the browsers and then I would like the admin bar to stay aligned with the main body at 960 pixs.

@modemlooper

Moderator

14 years, 9 months ago

I am still confused as to what you are trying to accomplish. Do you want a full browser width admin bar but keep the title and links the same width as the page content? If so you don’t need to add a div. #wp-admin-bar is the full width of the browser. #wp-admin-bar .padder is coded to scale.

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

The topic ‘Trying to place div element at top behind admin bar in Buddypress’ is closed to new replies.