Blog, Website & Page Publishing

MBradford22
Member

Make Header Full Width in Thrifty Theme

I'm trying to make my header be full width in Thrifty. I want the main section of the header to have a white background, but I'm trying to put a small section above that with a different color. When I do that, because it's not full width, it just looks weird 

0 Upvotes
1 Reply 1
jackbutler
Member

Make Header Full Width in Thrifty Theme

 

To create a header with a full-width white background and a small section above it with a different color in Thrifty, you'll need to use some CSS to style your header. Here's a step-by-step guide on how to achieve this:

  1. HTML Structure: Make sure your HTML structure is set up appropriately. You should have a container for the header and then two sections within it, one for the small section above and another for the main header section. For example:

 

htmlCopy code
<header class="header"> <div class="top-section"> <!-- Content for the small section above --> </div> <div class="main-section"> <!-- Content for the main header section --> </div> </header>

 

 
  1. CSS Styling: Apply the necessary CSS styles to achieve the desired look. You can use CSS Flexbox or Grid for layout control. Here's a basic example using Flexbox:

 

cssCopy code
.header { display: flex; flex-direction: column; background-color: white; /* White background for the main header section */ } .top-section { background-color: #your-color; /* Replace with the desired color for the top section */ padding: 10px; /* Adjust the padding as needed */ } .main-section { /* Add styles for the main header section, such as logo, navigation, etc. */ }
 
  1. Adjust Styles: You may need to adjust the padding, margins, and other styles to get the exact appearance you want. You can also use media queries to make the design responsive for different screen sizes.

  2. Additional Considerations: Make sure to consider the responsiveness of your design. You may need to adjust styles for smaller screens using media queries.

Remember to replace #your-color with the specific color code or name you want for the top section. You can also customize other styles like fonts, sizes, and margins to match your design requirements.

By following these steps and customizing the CSS styles to your liking, you should be able to create a header with a full-width white background and a distinct colored section above it in Thrifty. While making your header you need to know that you internet is stable or not. 

0 Upvotes