Return to previous page

Create Vertical Menu Design - by bstafford214

This topic has 10 replies, 4 voices, and was last updated 5 years, 6 months ago ago by Rose Tyler

bstafford214

Participant

November 5, 2018 at 05:05

Hello,
I need help on learning how to:

1. Changing the vertical style of this menu on the home slider page.
How do I make it go vertical and not horizontal?
https://prntscr.com/legnhu

2. Changing the category page “Dog”, how do I change this style to remove the border box, so it does not look like the box and remove the words “Catagories”?
https://prntscr.com/legngq

3. Need to make the menu design look like the menu example that shows it going down vertically and only shows the categories and sub-categories.
https://prntscr.com/legnj0

I have put my login and pass in the private content box
Thanks so much for your help.

Regards
Bill

Please, contact administrator
for this information.

#202292 Copied Theme version: XStoreVersion: 5.1.1 WooCommerce version: 3.5.1

9 Answers

Rose Tyler

Support staff

November 5, 2018 at 10:15

Hello,

1) Please describe the desired result in more details.
2) Please delete this custom css code http://prntscr.com/leizho http://prntscr.com/leizsx
add Product Categories widget in Appearance > Widgets > Shop sidebar and leave empty Title area.
3) Set settings appropriate to your needs http://prntscr.com/lej14v
also, go to Theme Options > Shop elements > Categories

Regards

#202327 Copied

bstafford214

Participant

November 5, 2018 at 10:53

Hello Rose.
Thanks for the quick reply.

1. Using the top menu shows the categories and sub categories spreading out horizontally.
How to make them go down vertically when I click on “Dog” in the header menu selection?

2. Where is the file located to delete these lines of css code?
I have gone to: Product Categories widget in Appearance > Widgets >
Deleted the name “Categories” and unchecked the box, left the name blank.
Now the page has an error.
https://prntscr.com/lejh3e

3. Not sure what it means setting it appropriate.

Thanks for your help.
Regards

Bill

#202340 Copied

Rose Tyler

Support staff

November 5, 2018 at 11:38

Hello,

1. Please watch these videos https://youtu.be/OnxkixHtVLI https://youtu.be/f07MBdnFPfk
2. XStore > Theme Options > Custom css > Global custom css.
Appearance > Widgets > Shop sidebar > Product Categories widget – http://prntscr.com/lejzbx
3. http://prntscr.com/lejzqc

Regards

#202356 Copied

bstafford214

Participant

November 6, 2018 at 03:50

Hello Rose,

Thank you for replying so quickly with your response.
1. I have watched the video again for Creating a Menu, now have watched the How to create Mega menu using static block, I missed this one. I will give this a try for the vertical creation of the drop down style menu.

2. I now have found the Global custom css, did not find this before, thank you.

3. Have now set the Shop Sidebar to what you have shown.

Also regarding “Pages”. Do I need to create a page for each category name I am creating for the menu names?

I have noticed that when I go to Appearance>Menus>Pages – I must create a page with the name of the menu name I want to add. Is this correct?

Can you please have a look at the site and tell me if I have done the changes correctly.

I have a new question to ask that I am unsure how to properly complete.

4. How do I properly reduce the photos on the slider? I would like the slider to look like similar to the height in this example. https://prntscr.com/leujam
I try to change the photo dimensions, but don’t know the correct dimension to use, it does not look correct when I do it. I have put the original demo photo dimension back to what it was before.

Thanks again for all your help.

Best Regards
Bill

#202440 Copied Theme version: XStoreVersion: 5.1.1 WooCommerce version: 3.5.1

thisisbolo

Participant

November 6, 2018 at 07:05

Hi –

Yes, you have to specify what you want to link to in your menu. If it’s a ‘Page’ then you would need to create an actual page to link to, for instance, ‘Contact Us’.

If you want to link to a ‘Product Category’, then you need to create an actual product category by going to Products > Categories. Once you’ve created a category, you need to assign products to these categories.

Then, once that’s done, you can add this ‘Category’ to your menu and it’ll take you to a shop page with all the products in that category with your shop sidebar showing.

The category taxonomy is an important step. I’d give it some thought as to how you’d like to structure your site architecture.

Based on the example you shared, it looks like they’ve categorized it per animal, and then subcategories for that animal.

Giraffe (Main Category)
– Wet Food (Sub Category)
– Dry Food (Sub Category)
– Giraffe Roller Skates (Sub Category)

As for the slider, you can adjust this in the row settings I believe. The demo content might have set the row to full height but I’ll let Rose confirm.

Hope this helps a bit!

#202444 Copied

bstafford214

Participant

November 6, 2018 at 08:30

Hi,
Thank you so much for the additional explanation. I must have something wrong with my menu, it does not show my products now, not sure what I did to change to that problem, self induced.

Will start again with the menu by setting up by Animal categories, then sub- categories.

If you want to link to a ‘Product Category’, then you need to create an actual product category by going to Products > Categories. Once you’ve created a category, you need to assign products to these categories.

How do you assign the products? Is this done in
“Products > Add New” ?
https://prntscr.com/lew6m4 or https://prntscr.com/lew7sw or https://prntscr.com/lew89n

This is what I have so far created in “Menu
Dog (Main Category) (This is chosen from the Categories?)

– Dog Food (Sub Category) – Dry Food (Products)(a sub-category)(This is from “Products”?
– Dog Treats (Sub Category) – Chewy Treats (Products)(a sub-category)
– Dog Clothing (Sub Category) – Clothing (Products)(a sub-category)

So with the list here for example:
Create a menu using “Category” for “Dog” (By animal type)
Create a menu using “Products or Product categories” for “Dry Food” (sub-category)
Create a menu using “Product categores” for “1Pc Dog Treat Snack Food”

In my “Products” that are imported, I set each product items “category” that it belongs to?

I think I am mainly confused on the “Appearance>Menus> for what structure to put in.
https://prntscr.com/lewe9j

I don’t need “Pages”, “Posts”, “Static Blocks for now, just setting up the menu and be able to see the products for sale on the correct webpage.

Trying to achieve this look after I figure it all out. https://prntscr.com/legnj0

Thanks for any further help you can give me in this area. The documentation and video I have studied leaves out certain things and not clear on how to do what I need.

Regards
Bill

Please, contact administrator
for this information.

#202453 Copied Theme version: XStoreVersion: 5.1.1 WooCommerce version: 3.5.1

Olga Barlow

Support staff

November 6, 2018 at 14:50

Hello,

1) If this is the first time when you work with the WooCommerce plugin, WooCommerce products and categories I would recommend you to check the WC plugin documentation https://docs.woocommerce.com/documentation/plugins/woocommerce/getting-started/
There you’ll find information on how to create categories, products and how to add the product to the category you need http://prntscr.com/lf16dl .

2) Our theme supports a few menus:
– main menu (the horizontal menu http://prntscr.com/lf176v )
– Main menu right (use this menu location ONLY if you use header type with 2 menus http://prntscr.com/lf1a3j )
– secondary menu (the vertical menu http://prntscr.com/lf17g2 )
– mobile menu (displays on mobile devices http://prntscr.com/lf17so )
– my account menu (if you don’t want to use default WooCommerce my account menu and prefer your own http://prntscr.com/lf188e )
Now we need to sort out what menu and where you want to create.
If you don’t know how to use menu items from the left side I would recommend you to read default WordPress documentation about this. Categories you mentioned on your screenshot are the posts categories http://prntscr.com/lf1axw if you want to get links to posts categories you can use them. If you don’t know the difference between post and product category read WordPress and WooCommerce docs. Products in the menu are the links to products. If you need link to the product in the menu you can use it.
But to help you with the menu creation I would ask you about the mockup of the menu that you are trying to create. Could you provide me the mockup of the menu and I’ll guide you how to create it?

3) Don’t keep enabled all the plugins that come bundled with XStore theme. Read about required and recommended plugins https://xstore.helpscoutdocs.com/article/36-included-plugins , check what recommended plugins you really plan to use depending on options that plugins offer and then enable them. Because every additional plugin slows down a site a little bit and there is no need to keep it enabled if you don’t use its options.

Regards

#202518 Copied

bstafford214

Participant

November 6, 2018 at 16:14

Hi Olga,

Thank you for the reply and the guided help and links for the additional documents to study.
Yes, this is my first time to use WooCommerce plugin, WooCommerce products and categories.

Once I read the information and take some good notes, I should better understand how it operates. I initially thought it would be easier to build the menu system, but now understand that I must learn much more. When I complete my review of all the relevant information and documents you have pointed me to I will give it another try.

I do want to learn this very much so I can properly understand how the system works. I will send my mockup menu and any further questions once I finish reviewing.

Thanks again for your great support, help and advice.

Best Regards

Bill

#202525 Copied

Rose Tyler

Support staff

November 6, 2018 at 16:32

Hello,

You’re welcome!

Regards

#202527 Copied
Viewing 10 results - 1 through 10 (of 10 total)