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 or via Sitebuilder > Style > CSS Editor:
Note:
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. Obviously, the above custom CSS does not take that into account. You could add a CSS Media Query to move the Search box to the sub navigation bar at a certain breakpoint where the Search box obscures the main navigation menu items.
But don't worry, there is a simpler solution to this by simply adding these in css_additional.css template or via Sitebuilder > Style > CSS Editor:
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; stylevar left/right doesn't work in css_additional) */ 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; }
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. Obviously, the above custom CSS does not take that into account. You could add a CSS Media Query to move the Search box to the sub navigation bar at a certain breakpoint where the Search box obscures the main navigation menu items.
Comment