Jump to content

How can I add Multiple Buttons to the Announcement Bar?

Recommended Posts

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.

website-mockup.png

Link to comment
  • Replies 5
  • Views 878
  • Created
  • Last Reply

Top Posters In This Topic

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.

website-mockup.png

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?

Screenshot 2021-10-05 at 14.52.32.png

Link to comment
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?

Screenshot 2021-10-05 at 14.52.32.png

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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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.

Screen Shot 2021-10-12 at 13.57.51.png

Link to comment
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.

Screen Shot 2021-10-12 at 13.57.51.png

Add to Design > Custom CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.