- i am running Vb 6.0.3 and used your code to move my search box out of the header to the nav bar. I got that to work but i want my header to cover the entire top of the screen and it doesnt. I have set my Wrapper max width to 100% and used this code for the search. i would like the site logo to stretch the width of the screen? Even if i shrink the wrapper max back to 1200px the header falls a little short of covering it but i like the forum much better covering the entire width of the screen. Would just like the header logo to match the full width.
#header { position: relative; }
#header .header-cell { width: 100%; }
#header .site-logo, #header .site-logo img { max-width: 100%; } /* makes logo spans the width of the header */
#header .site-logo { padding: 0; } /* remove padding around the banner logo */
#header .toolbar {
position: absolute;
right: 0; /* for LTR languages (change right to left for RTL; see note below) */
bottom: -34px; /* you may need to adjust this accordingly */
padding: 0;
width: auto;
}
/* reduce search box width from 168px to 120px or any size if you want */
.search-container .search-box .search-term { width: 120px; }
Announcement
Collapse
No announcement yet.
Vbulletin 6 header
Collapse
X
-
Vbulletin 6 header
Tags: None
- Top
- Translate
- Bottom
-
- Top
- Translate
- Bottom
-
Can you post or PM the link to your forum so I can check?
- Top
- Translate
- Bottom
Comment
-
You're using a banner logo that is only 1024px wide. Use a wider logo at 1920px (at least) or even double if you want to support wide screen resolutions.
- Top
- Translate
- Bottom
Comment
-
The CSS code doesn't stretch the banner image to fit the full-width to preserve the image quality. But an image that is wider than the screen is shrunk proportionately to keep the aspect ratio. So it's better to use a wider image that fits or exceeds most of the screen resolutions.
- Top
- Translate
- Bottom
Comment
-
Then I think the system is resizing the uploaded image based on the configured maximum size in the Attachment Manager in AdminCP.
If you want, you can stretch the image to force it to fill the full-width by adding this additional CSS:
Code:#header .site-logo img { width: 100%; }
- Top
- Translate
- Bottom
Comment
-
Users Viewing This Page
Collapse
There is 1 user viewing this forum topic.
- Guest
Latest Posts
Collapse
-
by YevhenSThanks for your assistance. The issue is resolved, and I am confirming it now....Today, 02:35 AM
-
Get Affordable and Fast VPS for vBulletin -
by YevhenSHello everyone,
I'm Yevhen, joining you all. As a new member here, I'm excited to dive into discussions and share insights with you all....Today, 02:18 AM -
by glennrocksvbtearjerkers, any update on the testing of the new version 1.5? Were you able to receive the download link and install it?...Yesterday, 06:07 PM
Comment