But don't worry, there is a simpler solution to this by simply adding these in css_additional.css template:
#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