Two different header menus

5 replies · opened Apr 16, 2019

Ccochn01Apr 16, 2019

Hi there,

How do I include sub menus to drop down menu.
The reason for... I want apply different colors to drop down menu from the primary menu colors.

Thanks much!

NC

SSemicolon WebSTAFFApr 17, 2019

Hello,

Apologies about the misunderstanding, however, we are not entirely sure about your question. According to the Screenshot you have sent us, it appears that you would like to use 2 types of Dropdown Menus with the Header. One is the Default type that is the Standard Primary Menu's Dropdowns and the other one is the Bootstrap Type. Unfortunately, the Bootstrap Dropdown Menus do not have a Sub Dropdown Menu option, so this will need a Lot of Customization. It is recommended to add a Custom Class to the existing Sub Menus and then style them or add different colors according to your needs.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Ccochn01Apr 17, 2019

Hello,

Thank you so much for your help.
That makes sense.

However, how would I go about "adding a Custom Class to the existing Sub Menus and then style them or add different colors according to your needs?"

Do I wrap submenu as (e.g.) <class=custom> </div>?

Also have noticed caret-down Custom CSS is not taking. The 'icon-angle-down' is with Style.CSS but not allowing me to overwrite in my Custom.CSS Is there a work around for this?

Nina

Ccochn01Apr 18, 2019

Hi There,

  1. I think I got it!
    I went ahead and used the 'transparent-header semi-transparent dark' class in header. Made edits to Custom.CSS. Now the real test is to upload and view live on mobile... It was a work-around but seems to do it.

  2. But still would like to use the ‘icon-sort-down’ in primary as mentioned before.

Thanks
:-)

SSemicolon WebSTAFFApr 21, 2019

Hello,

You can simply add a Class to the <ul> Tag of the Sub Menu and then Add Custom Styles to the CSS Class accordingly. Example:


	

		...

		
- [Shop](shop.html)
			
				
- [4 Columns](shop.html)
				
- [3 Columns](shop-3.html)
					
						
- [Full Width](shop-3.html)
						
- [Right Sidebar](shop-3-right-sidebar.html)
						
- [Left Sidebar](shop-3-left-sidebar.html)
					
				
				
- [2 Columns](shop-2.html)
					
						
- [Right Sidebar](shop-2-right-sidebar.html)
						
- [Left Sidebar](shop-2-left-sidebar.html)
						
- [Both Sidebar](shop-2-both-sidebar.html)
					
				
				
- [1 Columns](shop-1.html)
					
						
- [Full Width](shop-1.html)
						
- [Right Sidebar](shop-1-right-sidebar.html)
						
- [Left Sidebar](shop-1-left-sidebar.html)
						
- [Both Sidebar](shop-1-both-sidebar.html)
					
				
				
- [Categories - Parallax](shop-category-parallax.html)
				
- [Combination Filter](shop-combination-filter.html)
				
- [Single Product](shop-single.html)
					
						
- [Full Width](shop-single.html)
						
- [Right Sidebar](shop-single-right-sidebar.html)
						
- [Left Sidebar](shop-single-left-sidebar.html)
						
- [Both Sidebar](shop-single-both-sidebar.html)
					
				
				
- [Cart](cart.html)
				
- [Checkout](checkout.html)
			
		

		...

	

	...

This should definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard