Urgent - Modify HEADER Design

Solved
MaxCosta
Tourist
91 0 35

Hello,

I have several design issues for my Shopify Header under the Motion Theme and I would like to find solutions ...

pbmheader.png

 

The drop-down frame that opens when I hover the mouse over "Shop" creates a transparent frame. It is I who chose the transparent because I do not want a colored frame.

However, we see the markdown on the image and I would like us not to see any frame but only the text of the subcategories.

In the drop-down menu, the color is not the General color of the body of the text (therefore black). I would like all menu items to appear in white.

 

In addition, I would like to add a small animation each time you hover the mouse over one of the menu titles (such as the underlined word).

Finally, I would like to create a space between each Menu Title (without changing their size). This type of spacing:

 

pbmh.png

All of these changes affect the view on dekstop only.

 

Thanks in advance for your help,

I really need to fix these issues ...

 

This is the preview of my Shopify website : https://a852kxbbwvis7di3-47455862950.shopifypreview.com

 

Thank you...

Best regards,

Max COSTA

0 Likes
Don
Shopify Staff
Shopify Staff
1298 79 172

Hi there @MaxCosta!

Don here from Shopify.

Thanks for reaching out here in our Community to share your design queries for the Motion theme.

How you can get support for your theme will depend on who created this theme.

In this case, as Motion was developed by Archetype themes they would be the ones responsible for providing support for their creation.

You can check out their support knowledge base here and if you wish to contact them directly you can do so here.

They've also provided some links on those pages to outside services you can use to request customisation support.

Would you still be in the process of setting up your store and working towards launch, or have you started selling already?

Let us know what else you need to work on for your store next so we can see what we might be able to advise.

 

Regards,

Don

Don | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

MaxCosta
Tourist
91 0 35

Thanks for your feedback. I tried to contact them but got no response, and it's urgently needed ...

Apparently it would be a simple modification at the level of the code like the site: https://www.eliou-eliou.com/

@KetanKumarsir do you think it is possible to do that  ?

 

Thank you...

0 Likes
KetanKumar
Shopify Partner
17292 1871 6462

@MaxCosta 

do you have just change the navigation color?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MaxCosta
Tourist
91 0 35

Yes but I want white, and if I choose white all the text on my site will be white on white and therefore illegible.

But the main problem for me is the underlining when you hover the mouse, and the spacing of titles

0 Likes
MaxCosta
Tourist
91 0 35

@KetanKumarplease bro can you help me ?

 

thank you in advance..

max

0 Likes
Ninthony
Shopify Partner
1802 261 711

This is an accepted solution.

Hey there, backup your theme before you make this change, then copy and paste this to the bottom of your theme.scss.liquid file in your assets folder, make sure to get that top bracket too because there's a media query that isn't closed in your file:




}

.site-nav__dropdown {
    box-shadow:unset;
}
.site-nav--has-dropdown.is-focused>a, .site-nav--has-dropdown:hover>a {
    color: white!important;
}
.site-nav__dropdown-link {
    color: #FFF;
}
a.site-nav__dropdown-link:hover {
    color: #FFF;
}
.site-nav__item {
    margin: 0 20px;
}
.site-nav__link {
    position: relative;
}
.site-nav__link:after{
    content:'';
    width:0;
    height: 3px;
    background-color: white;
    position:absolute;
    left:0; 
    bottom:0;
    transition: width .2s ease;
}
.site-nav__link:hover:after {
    width: 100%;
}

 

Should be everything you asked for. Let me know if you need help and I can request access to your themes and add it in there for you.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
MaxCosta
Tourist
91 0 35

@Ninthony Thank you very much everything is working perfectly !!

Only I have one last request, is it possible to apply the color: #EA731C (it's orange) to the whole header? 

All elements (menu title, cart icon, mobile menu icon ...)

If all of this is possible easily for you that would be really great ..

Thank you in advance...

Max COSTA

 

0 Likes
MaxCosta
Tourist
91 0 35

@Ninthonydo you think it's possible ?

 

thank you..

0 Likes
Ninthony
Shopify Partner
1802 261 711

You mean the text color? You could add this after my other code:

#SiteHeader a {
    color: #EA731C!important;
}

 

But it makes the text really hard to see, I'd suggest not doing it.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D