Add a custom button in the header with correct alignment in the main menu

[kapooraayan1]

I have added the code in the header liquid file but the alignment seems to be off. Can anyone please help me resolve this alignment and bold the sign up now text? I need this button after the Contact Us main menu.

It’s appearing like this

  <div class="header__icons{% if section.settings.enable_country_selector or section.settings.enable_language_selector %} header__icons--localization header-localization{% endif %}">
    <a href="/collections/all-products" class="button button--primary">SIGN UP Now!</a>  
    <div class="desktop-localization-wrapper">
        {%- if section.settings.enable_country_selector and localization.available_countries.size > 1 -%}
          <noscript class="small-hide medium-hide">
            {%- form 'localization', id: 'HeaderCountryMobileFormNoScript', class: 'localization-form' -%}
              <div class="localization-form__select">
                <h2 class="visually-hidden" id="HeaderCountryMobileLabelNoScript">{{ 'localization.country_label' | t }}</h2>
                <select class="localization-selector link" name="country_code" aria-labelledby="HeaderCountryMobileLabelNoScript">
                  {%- for country in localization.available_countries -%}
                    <option value="{{ country.iso_code }}" {%- if country.iso_code == localization.country.iso_code %} selected{% endif %}>
                      {{ country.name }} ({{ country.currency.iso_code }} {{ country.currency.symbol }})
                    </option>
                  {%- endfor -%}

[BSS-Commerce]

Hi @kapooraayan1 ,

I searched your store based on the domain in the image, I didn’t see any custom buttons added, are you still getting the error? If so, please reproduce it and describe it in more detail.

Also, if you want to add a custom button right after Contact Us, why don’t you add it as a menu item, and then just style it by using CSS?

[kapooraayan1]

Website is sponsorenergy.com

i have added the hover effect in the main menu where it changes the color to pink. I am trying to add a button with pink background with white text and that button text is also changing the text color and blending with the background. That is why trying to add a custom button so that it wont change the color.

[kapooraayan1]

I have removed the code that i have mentioned in the post. Do you want me to add the code so that you look into that?

[BSS-Commerce]

Yes @kapooraayan1 ,

Please add the code again so I can check and help!

[kapooraayan1]

Sure, Just me 5 mins i am adding the code and the navigation menu to live website.

[kapooraayan1]

Thanks for your response. I have added the code to the theme.

[kapooraayan1]

On mobile phone, its appearing like this

[BSS-Commerce]

@kapooraayan1

Please follow these steps

Go to Themes → Edit code → Find the base.css file and add this code at the end of the file

.header #HeaderMenu-sign-up-now span {
    color: #fff !important;
}
.menu-drawer__navigation-container .menu-drawer__navigation .menu-drawer__menu #HeaderDrawer-sign-up-now {
    color: #fff !important;
}

So when you hover over your text, it will not be changed anymore

Hope it helps @kapooraayan1

[kapooraayan1]

Thank you so much for helping with this. Can we also add another button for the contact form so that? When someone clicks the button it will pop up the contact form on the same screen to send the email?