Hi,
I’m trying to get my search bar area to full-width of the page just like above on this tagdiv forum. I’ve searched online and tried the negative margins and all but after an hour of trying I can’t get it to full width and the search form inside messes up. Are you able to provide some css to solve this? I attached a screenshot below:
https://goo.gl/photos/SrNBzZ5BGnyXSonS7
Thanks so much.
Hi,
That would be possible if you do not use a sidebar on the forums page
– https://www.screencast.com/t/Z4rOSnh9Kq
– https://www.screencast.com/t/1vh2IWBiT9bb
It would be difficult to have the sidebar as well, and a full width search bar. The page containers will not allow this
– https://www.screencast.com/t/FlIGnEx0
Thanks
I already did that, that is easy to do by just changing the settings. Maybe I didn’t explain so well.
I mentioned the CSS to make the search area the full-width of the browser/page just like what you have on this tagdiv forum. You can see the gray area all the way to the edges. I know it is with css but what is the css to do this?
You can see at my site https://www.cruisehive.com/forums
Thanks so much.
Hi,
Sorry for misunderstanding. The width of the search elements is the width of the container (and of the theme)
– https://www.screencast.com/t/bOUuYoPq
It already occupies the full width of this container
– https://www.screencast.com/t/yTN1EiLw
This forum is constructed custom and designed differently, the search has it’s own container and this allow the design you mention.
Thanks
Most elements have a container I just thought you guys would be able to give some css to overlap the parent container. Anyway, I have worked out how to get the main search area full width like in the image below but for some reason, the search bar doesn’t display correctly.
https://goo.gl/photos/zGawwWXTUJwvGvGc9
I used the following css:
#bbpress-forums {
background: transparent;
clear: both;
margin-bottom: 20px;
overflow: visible;
font-size: 12px;
}
#bbpress-forums div.bbp-search-form {
float: right;
background-color: #f5f5f5;
margin-right: -3000px;
margin-left: -3000px;
padding-right: 3000px;
padding-left: 3000px;
}
Hi,
There is no easy way to do this with CSS. The containers have fixed widths and all the elements depend on that fixed width. It could be done with strong code, but it may affect other elements.
Try adding a code like this
– https://www.screencast.com/t/OtAd9AgSmS
.bbp-pagination {
clear: both;
}
#bbp-search-form {
width: 1068px;
margin-left: -1068px;
}
I believe you should use these codes in the Advanced CSS desktop section, so it will apply only on desktop. These modifications may not work properly on other devices.
Thanks
Thanks so much, works perfectly and looks great.
