Copying header menu - Code

[IloveWebsites]

Good day,

I have a new site, my header menu look like this 

I want to change it to show like this (www.dynutrition.ro)

I try some codes generated by chatgpt, but they don't look good, the line doesn't center, or there are spacing differences.

[Mehran_Ali]

HI @IloveWebsites 

First thing first if you want to make it similar you have to add the menus like that and do some CSS you said you already tried so can I have you store the URL and password if it is password protected so I can check that for you

[steve_michael2]

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

[DaisyVo]

Hi @IloveWebsites 

I hope you are well.

Could you please share your store and entry password so we can check it directly and provide you with a suitable customization code?

Looking forward to hearing from you soon. Thank you!

Best,

Daisy - Avada Support Team.

[IloveWebsites]

https://cryogeltest.myshopify.com/password  -> the password is: cryogel

[DaisyVo · Accepted solution]

Hi @IloveWebsites 

I hope you are well. You can follow our instructions below:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
Step 3: Copy the code below and paste it there

Here is the code for Step 3:

@media screen and (min-width: 768px){
header.header.header--middle-left.page-width.header--has-menu.header--has-social > nav.header__inline-menu ul.list-menu.list-menu--inline > li {
    padding: 10px !important;
    border-right: 1px solid black;
}
header.header.header--middle-left.page-width.header--has-menu.header--has-social > nav.header__inline-menu ul.list-menu.list-menu--inline > li:last-child {
    border-right: none !important;
}
}

 

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

[IloveWebsites]

Is it possible to make the lines a little smaller? they are a bit long.

The code is perfect! 

[DaisyVo]

Hi @IloveWebsites 

Please replace the code I shared above with this one below: 

@media screen and (min-width: 768px){
header.header.header--middle-left.page-width.header--has-menu.header--has-social>nav.header__inline-menu ul.list-menu.list-menu--inline>li::before {
    content: "";
    width: 100%;
    height: 12px;
    background: white;
    position: absolute;
}
header.header.header--middle-left.page-width.header--has-menu.header--has-social>nav.header__inline-menu ul.list-menu.list-menu--inline>li {
    position: relative;
}
header.header.header--middle-left.page-width.header--has-menu.header--has-social>nav.header__inline-menu ul.list-menu.list-menu--inline>li::after {
    content: "";
    width: 100%;
    height: 12px;
    background: white;
    bottom: 0;
    position: absolute;
}
}

 

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

[IloveWebsites]

Dont work, now the line dont appear

 

[steve_michael2]

Hi @IloveWebsites,

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

header.header.header--middle-left.header--mobile-center.page-width.header--has-menu.header--has-social.header--has-account {
    padding: 20px 8px;
}
ul.list-menu.list-menu--inline li {
    padding: 8px 50px;
}

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!