There are cases where you want to add a banner that spans the width of the container. But the Search box on the right gets in the way. You can solve this by modifying the header template but you have to know what you're doing so as not to mess up the template.
But don't worry, there is a simpler solution to this by simply adding these in css_additional.css template:
Note:
But don't worry, there is a simpler solution to this by simply adding these in css_additional.css template:
Code:
#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: -29px; /* 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; }
- The css used to use stylevars for the text-direction but stylevars don't seem to be working on additional css anymore, so you have to hardcode "right" for LTR and "left" for RTL. (this is only true when using Sitebuilder. For self-hosted version, you can use sylevars when editing css_additional template)
- If you have a lot of main navigation menu items, the search box may cover them when you shrink the window size until you resize it down further that the Responsive design for mobile screen kicks in and hides the search box and replaces it with the mobile search box.
Comment