Header Menu close to edge

[Sivadarshan]

I need to make the header menu items to be placed to the edge of the website, I'll attach the reference image

[rajweb]

Hey @Sivadarshan ,

To align the header menu items to the edges of your website, you can use CSS. Here’s a code snippet to achieve that:

/* Header Styling */
.header {
    display: flex;
    justify-content: space-between; /* Aligns items to both edges */
    padding: 0 10px; /* Adjust the padding as needed */
    background-color: black;
}

/* Menu Items on the Left */
.menu-left {
    display: flex;
    gap: 20px; /* Adjust space between items */
}

/* Right Side (Shopping Bag) */
.menu-right {
    display: flex;
    align-items: center;
    color: white;
}

/* Links Styling */
.menu-left a, .menu-right {
    text-decoration: none;
    color: white;
    font-size: 16px;
}

.menu-left a:hover {
    text-decoration: underline; /* Optional hover effect */
}

This code will ensure the menu items on the left and the shopping bag on the right are aligned neatly at the edges of your website. You can adjust the padding and gap to fit your design needs.

If I was able to help you, please don't forget to Like and mark it as the Solution!

Best Regards,

Rajat Sharma

[Sivadarshan]

where to place this code

thanks in advance

[rajweb]

CSS code should be added to your theme's CSS file.

Locate the CSS file:

1. Open the Assets folder on the left sidebar.

Look for CSS file like this:

-theme.css

-theme.scss.liquid

- base.css (if you are using a newer theme, like Dawn or Sense)

thanks

[Sivadarshan]

but it's not working

[steve_michael2]

Hi  @Sivadarshan , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

[Sivadarshan]

https://rugd-in.myshopify.com/

rugged

[steve_michael2 · Accepted solution]

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
mobile-center.page-width.header--has-menu.header--has-account {
    padding-left: 0rem !important;
    padding-right: 0rem !important;
}

.header {
    padding: 0px 0rem 0px 0rem !important;
}

html.js {
    overflow-x: hidden !important;
}
</style>

[steve_michael2]

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!

[steve_michael2]

After reviewing your store, my suggestion is to install Big Bulk Discount to boost your average order value. Our app adds tiered discounts, encouraging larger purchases and driving more revenue with minimal effort. Start increasing sales today! https://apps.shopify.com/big-bulk-discount