Header and home page being cut off on the sides

[llennoxllc]

I was manually entering codes to solutions I found on other Shopify help forums. The goal was to enter codes that would expand my navigation bar to full width as well as give it a colored background. I achieved that but now my home page is too big and icons are being cut off. Can someone give me a solution to keep what I want to revert the sizing back to normal so that it doesn't go over the edge of the screen? See the image below. 

[Mubashir_H]

hello @llennoxllc 

Based on the image you provided, it looks like the issue is caused by the navigation bar extending beyond the edge of the screen. To fix this, you can add a max-width property to your navigation bar CSS.

Assuming your navigation bar has a class called site-nav, you can add the following code to your theme's stylesheet:

.site-nav {
max-width: 100%;
}

This will limit the maximum width of the navigation bar to the width of the screen, preventing it from overflowing and cutting off the icons on your homepage.

If the icons are still being cut off, you may need to adjust their positioning or size. You can use your browser's inspect tool to identify the specific elements that need to be modified, and then add appropriate CSS styles to adjust their position or size.

I hope this helps! Let me know if you have any further questions.

[llennoxllc]

I use the theme dawn. Under what file would I enter that code

[Mubashir_H]

If you're using the Dawn theme in Shopify, you can add custom code to your theme in the following way:

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit and click on the "Actions" button, then select "Edit code" from the dropdown menu.
3. In the list of theme files on the left side, look for the file called "theme.scss.liquid" and click on it to open it in the code editor.
4. Add the following code to the bottom of the file:

.site-header {
background-color: #your-color;
max-width: none;
}

Replace your-color with the hexadecimal value of the color you want to use for your navigation bar.

• Save your changes by clicking the "Save" button.
• Preview your store to see if the navigation bar is displaying as desired.

This code will set the background color of the site header (which includes the navigation bar) to the color you specified and remove the max-width property, which will allow the navigation bar to expand to full width. However, keep in mind that modifying your theme's code can be risky and may cause issues with your store's functionality or appearance. Be sure to make a backup of your theme before making any changes, and proceed with caution.

[GemPages]

Hello @llennoxllc ,

Can you give me your Store URL( with pass if your store password is enabled) so I can check it for you?

Kind & Best regards,
GemPages Support Team

[llennoxllc]

I PM'd you