Improve look of menu

[consciouscrafties]

Hi Harry 🙂

I’ve changed headers so I have my menu going across the page.

It’s a bit cluttered at the mo so need your help with a few cosmetic changes pretty please (see screenshot):

• Reduce space between 1st and 2nd line
• Reduce horizontal spacing between main menu items
• Increase left and right margin so menu items don’t get cut off
• Reduce font size of main menu items
• Reduce spacing between items in drop down menu

I’ve also attached a screenshot of the header I’m using.

Thanks so much for your help,

Karen

Attachments:

You must be logged in to view attached files.

[consciouscrafties]

Also this is what happens when you hover over a menu then scroll down to see more menu options – it all turns grey (see screenshot)

Many thanks,

Karen

Attachments:

You must be logged in to view attached files.

[consciouscrafties]

Also just noticed that my SiteOrigin slider banner is appearing in front of the menu drop down items (see screenshot)

Many thanks,

Karen

Attachments:

You must be logged in to view attached files.

[consciouscrafties]

Hi Harry,

I’ve simplified the menu so I don’t need help with the first request now 🙂

So the things I still need help with are:

• Menu turning grey when scrolling
• SiteOrigin banner hiding menu on home page
• and (additional request) changing the colour of hover on menu drop down items (see screenshot)

Many thanks,

Karen

Attachments:

You must be logged in to view attached files.

[consciouscrafties]

Sorry missed this one out:

• Spacing between menu options in drop down (see screenshot)

Many thanks,

Karen

Attachments:

You must be logged in to view attached files.

[Harry]

Hi Karen,

1. Please add below code in Claue > Theme Option > General Layout > Custom CSS

.jas-menu > li:not(:first-child) {
margin-left: 25px;
}
#jas-menu.jas-menu > li > a {font-size: 12px;}

2. Add below code to reduce space between menu item on dropdown

.jas-menu ul li {
	line-height: 20px;
}

All issue relate to color, please go to Theme Option > Color Scheme and change Sub Menu Hover Color, Sub Menu Background Color, Header Sticky Sub Menu Background Color

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[consciouscrafties]

That’s PERFECT thank you so much Harry 🙂

Is it possible to add a line under the menu like the line above it? (see screenshot)

Many thanks,

Karen

Attachments:

You must be logged in to view attached files.

[consciouscrafties]

Oh and the SiteOrigin Slider is still covering the menu too (see screenshot)

Attachments:

You must be logged in to view attached files.

[Foster]

Hi,
Foster from JanStudio team here.
1. You mean you want a line under “Open A Shop” menu, right?
2. Could you please give me the page URL to check this issue?

[consciouscrafties]

Hi Foster,

Sorry I didn’t explain very well.

I’d like the same line that appear above the menu to be duplicated to ALSO appear under the menu (see screenshot)

Many thanks,

Karen

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

1. Please add below code

.header__bot .jas-navigation {
	border-bottom: 1px solid #ececec;
}

2. Please try add below code or send me the link of the page where have the banner

.header-4 {position: relative; z-index: 999;}

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[consciouscrafties]

Yay thanks Harry! Both those worked a treat 🙂

There is one other issue, none of the sub menu’s are appearing (for example Shop by Department) when users are in the vendors dashboard.

Here’s a vendor test account so you can see the issue if you need to:

 

Live Site – Test Vendor (seller) log in:

Go to: https://www.consciouscrafties.com/my-account/

Username: Karens Crafts

Password: Teddy-0101

 

Many thanks for your help,

Karen

[consciouscrafties]

Oh also just found a problem with this CSS:

/* Make Menu position first (over banner) */
.header-4 {position: relative; z-index: 999;}

On mobiles, when user clicks the menu, the entire screen is overlaid with black (see screenshot)

Many thanks,

Karen

Attachments:

You must be logged in to view attached files.

[Harry]

Hi Karen,

Please change prev code to

@media only screen and (max-width: 1025px) {
.header-4 {position: relative; z-index: 999;}
}
.jas-menu.clearfix {overflow: initial;}

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[consciouscrafties]

Hi Harry,

That kept the black page on mobiles and also made the submenu drop downs hidden behind the banner again sadly.

[Harry]

Hi Karen,

Please send me the link where submenu below the banner

Thanks

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[consciouscrafties]

Hi Harry, I’ve moved the banner (on our home page https://www.consciouscrafties.com) further down the page so customers can still use our menu, but I’ll move it back up now for a few mins for you, give me a sec… 🙂

[consciouscrafties]

All done 🙂

I’ve removed the last code that you gave me as majority of customers are mobile users.

Many thanks,

Karen

[consciouscrafties]

Hi Harry am I able to move the banner back down the page so customers can use our menu yet?

Don’t worry if it’s difficult to fix as I’m hoping to change the home page very soon using the WPBakery Page Builder.

Many thanks,

Karen

[Harry]

Hi Karen,

Please remove prev code and change with new to fix sub menu below slider

.sow-slider-base {z-index: 0;}

and below code to fix menu on Vendor Dashboard

.jas-menu.clearfix {overflow: initial;}

Have nice Sunday!

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[consciouscrafties]

PERFECT!!! Thank you so much for all your help on this! 🙂

[Author]

Posts