How can I customize the main menu and add icons in the Pipeline theme?

[milliame]

I would like to know if there is a way to make my main menu titles bigger and with more spacing for each tab ( so that it fills more of the menu drawer). Also, would it be possible to add the account login and country selector icons to the bottom of the menu to look like this (as opposed to the account login icon being at the top and the country selector being in the footer):

Thank you!

[ExpertRookie]

Hi @milliame
Thank you for your question.
Please share your store URL, page URL and also password (if your store has one) so we can help you.

[BSS-Commerce]

Hi @milliame

Can you kindly share your store link (with the password, if any) with us? We will help you check it and suggest you a solution.

[Denishamakwana]

Hi,

Please share your store URL and if your store is password protected then also provide password too.

Thank you.

[LitCommerce]

Hi @milliame ,

Please send your site and if your site is password protected, please send me the password. I will check it.

[milliame]

The url is: milliamesgfdelights.com password is: milliame

[milliame]

Thank you.

The url is: milliamesgfdelights.com and the password is: milliame

[BSS-Commerce]

Hi @milliame

1. First of all, you can follow these steps to make your main menu titles bigger:

Go to Online Store → Theme → Edit code → theme.css and paste this code at the end of the file:

.drawer__menu .sliderow .sliderow__title {
        min-height: 70px !important;
        padding-left: 40px !important;
        font-size: 24px !important;
    }
    .localization-form {
          padding: 0 0 0 40px !important;
          flex-direction: row !important;
  
    }

    .localization-form__select::after {
         display: none;
    }

    select.localization-selector {
          border: 1px solid black;
          padding: 1rem 4rem 1rem 1rem !important;
    }

2. If you want to add the account login and country selector to the bottom of the menu, you can follow these steps:

3. Add the account login:

• Go to Online Store > Navigation → Header → Add menu item
• Add “Login” in the name box and paste “https://milliamesgfdelights.com/account/login” into the link box, then select it

2. Add country selector:

• Go to Online Store → Theme → Edit code → header.liquid and find the line has “drawer__menu” then paste the code after this line:

- {%- form 'localization', id: 'FooterCountryFormNoScript', class: 'localization-form' -%}
                        
           
                          
                            {% render 'icon-caret' %}
                        

                        
                        {%- endform -%}
                    

It’s a pity I can’t support country selectors with icons, but I will let you know if I find a solution.

I hope you find my answer helpful!

[LitCommerce]

Hi @milliame ,

Go to Assets > theme.css and paste this at the bottom of the file:

.header__drawer .drawer__top {
	height: 81px !important;
}
.header__drawer .drawer__top__left,
.header__drawer .drawer__close{
	height: 80px !important;
}
.header__drawer .drawer__top svg {
	width: 2em !important;
    height: 2em !important;
}
.header__drawer .sliderow {
	min-height: 80px !important;
}
.header__drawer .sliderow .sliderow__title {
	min-height: 80px !important;
	font-size: 30px;
}

Hope it helps!

[milliame]

Hi. Thank you for responding! This is what happened when I put in the code for the country selector. Is there any way it can be at the foot of the menu? Similar to the photo I posted before. Also, the account login icon isn’t appearing on the bottom.