How can I add Multiple Buttons to the Announcement Bar?

Site URL: https://www.max20.com

I want to have multiple buttons that are the same style as the rest of my buttons in my announcement bar. I think I would like them all to be different colours. Please can someone advise how I can achieve a look similar to my rubbish mock-up attached. I think preferably I'd like 3 buttons rather than two, with the ability to link to pages within the site, and to change the colour of all the buttons too. Thank you.

21 hours ago, jackpopsicle said:

Site URL: https://www.max20.com

I want to have multiple buttons that are the same style as the rest of my buttons in my announcement bar. I think I would like them all to be different colours. Please can someone advise how I can achieve a look similar to my rubbish mock-up attached. I think preferably I'd like 3 buttons rather than two, with the ability to link to pages within the site, and to change the colour of all the buttons too. Thank you.

I've sorted this out. Now all I need to figure out is how to add hover effects to each of the buttons, and to correct the spacing when viewing on mobile. Can anybody help? @tuanphan please?

On 10/5/2021 at 8:53 PM, jackpopsicle said:

I've sorted this out. Now all I need to figure out is how to add hover effects to each of the buttons, and to correct the spacing when viewing on mobile. Can anybody help? @tuanphan please?

Hi,

It looks like you removed buttons?

Can you add it? If your site is live, you can duplicate the site & add buttons there & share duplicated site url.

Also, can you describe hover effect? Same or 3 buttons or different?

On 10/7/2021 at 9:06 AM, tuanphan said:

Hi,

It looks like you removed buttons?

Can you add it? If your site is live, you can duplicate the site & add buttons there & share duplicated site url.

Also, can you describe hover effect? Same or 3 buttons or different?

I've sorted it @tuanphan thank you but I do now have another error if you can please help? 

I've added an announcement bar, and custom coded in 3 buttons. I've adjusted this announcement bar for it to appear below the nav menu. However, as the nav menu features 2 folders which appear as drop-down menus, each of these drop downs appears below the announcement bar. How do I get these to appear above? Please check out www.max20.com and let me know your thoughts. Thank you. 

Please find an example of what I mean below, thank you.

22 hours ago, jackpopsicle said:

I've sorted it @tuanphan thank you but I do now have another error if you can please help? 

I've added an announcement bar, and custom coded in 3 buttons. I've adjusted this announcement bar for it to appear below the nav menu. However, as the nav menu features 2 folders which appear as drop-down menus, each of these drop downs appears below the announcement bar. How do I get these to appear above? Please check out www.max20.com and let me know your thoughts. Thank you. 

Please find an example of what I mean below, thank you.

Add to Design > Custom CSS

.tweak-fixed-header .header .header-announcement-bar-wrapper {
    z-index: 10 !important;
}

Oh my god thank you so much!