Title: Horizontal menu Last modified: August 22, 2016 --- # Horizontal menu * Resolved [Di Rogers](https://wordpress.org/support/users/di-rogers/) * (@di-rogers) * [11 years, 9 months ago](https://wordpress.org/support/topic/horizontal-menu-12/) * I found this answer from you on making the menu horizontal. Very much newbie at CSS here, but learning. I get the general idea (sort of), but where would I put this? Inside the short code? * > #id-of-top-ul li {display:inline-block; vertical-align:top;} > #id-of-top-ul > li li {display:list-item;} or > #id-of-top-ul li {float:left;} > #id-of-top-ul li li {float:none;} These are > just a couple of possibilities, and there are undoubtedly other (and possibly > better) alternatives. They are also merely starting points : you will probably > want to tweak some other settings as well (to give some horizontal separation, > for example), and the relative success of any particular method may depend > on your specific menu structure (particularly the number of sub-items if you > use float). * For example my short code is: * `[cmwizard menu=24 flat_output=1 ol_root=1/] * I assume 24 is the referred to, but how exactly would I format that? * Thank you. * [https://wordpress.org/plugins/custom-menu-wizard/](https://wordpress.org/plugins/custom-menu-wizard/) Viewing 3 replies - 1 through 3 (of 3 total) * Plugin Author [wizzud](https://wordpress.org/support/users/wizzud/) * (@wizzud) * [11 years, 9 months ago](https://wordpress.org/support/topic/horizontal-menu-12/#post-5242744) * > …where would I put this? Inside the short code? * No, CMW does not provide any facility for specifying additional CSS rules. As to where you _should_ put it … well, there are a number of possibilities: - your theme may provide the facility for you to enter your own CSS rules as part of its custom settings; some themes do, most don’t - if you are running a child theme, then you could edit that child’s stylesheet and enter the rules there - there are plugins such as the CSS & Javascript Toolbox (and undoubtedly others similar) that provide the ability to enter your own CSS rules, above and beyond those of your theme - lastly, you _could_ modify your theme’s stylesheet, but **_I do not recommend this_** because any update to the theme would wipe out your customisations! * > I assume 24 is the referred to… * No, it isn’t. The `24` is the _internal-to-WordPress_ id of the custom menu that the widget is configured to filter; this is not the same as the **id** attribute that WordPress assigns to the UL (or OL in your case) HTML element that gets output to the page. WordPress assigns a unique id of `menu-{menu slug}[-#]`, where `{menu slug}` is the “name” of the custom menu being used, and `[-#]` is an optional, incremental number that ensures uniqueness when there are multiple occurrences of similar items being output on the one page. So, if your custom menu is called, say, “my custom menu”, then the first occurrence might have an id of `menu-my-custom-menu`, the 2nd would be `menu-my-custom-menu-1`, and the 3rd would be `menu-my-custom-menu-2`, etc. There is a potential problem with using the WordPress-generated id though : if you subsequently insert another instance in front your original instance – the one you provide all the custom styling for – then the original instance (now the 2nd instance) will change its id from `menu-my-custom-menu` to `menu-my-custom-menu-1` … which will throw out your styling. You might be better off providing your own unique class for either the widget itself, the container, or the list element (UL or OL), via the CMW settings. (Using a class rather than an id makes your CSS styles re-usable for other instances). * All the main browsers nowadays provide Developer facilities which enable you to play around with a page’s HTML & styling (to some degree, and with varying ease), and I would suggest that that is the place to start (personally, I could not do without Firefox’s Firebug extension). You can try out different CSS rules without having to code anything into WordPress, and only when you are happy with the results do you then have to make a decision as to how to implement them. * Thread Starter [Di Rogers](https://wordpress.org/support/users/di-rogers/) * (@di-rogers) * [11 years, 9 months ago](https://wordpress.org/support/topic/horizontal-menu-12/#post-5242749) * I am running Aspen and it does provide a place for custom CSS styling. I am not currently running a child theme (I am still a bit confused on that, but I am reading and experimenting with it.) What I have done is clone my live site onto what I call my mirror site. Where I can play and then just wipe and reclone the live site if I really mess the whole thing up. * Thank you so much for the awesome plugin AND the detailed explanation. You are a gem. It makes things much clearer. * Actually Aspen also has a page by page styling feature…so I might be able to use that as well, I will play with it. * Again, thank you very much! * Plugin Author [wizzud](https://wordpress.org/support/users/wizzud/) * (@wizzud) * [11 years, 9 months ago](https://wordpress.org/support/topic/horizontal-menu-12/#post-5242753) * No problem, and I’m glad your theme is making things easier for you. Viewing 3 replies - 1 through 3 (of 3 total) The topic ‘Horizontal menu’ is closed to new replies. * ![](https://ps.w.org/custom-menu-wizard/assets/icon-256x256.png?rev=1381901) * [Custom Menu Wizard Widget](https://wordpress.org/plugins/custom-menu-wizard/) * [Frequently Asked Questions](https://wordpress.org/plugins/custom-menu-wizard/#faq) * [Support Threads](https://wordpress.org/support/plugin/custom-menu-wizard/) * [Active Topics](https://wordpress.org/support/plugin/custom-menu-wizard/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/custom-menu-wizard/unresolved/) * [Reviews](https://wordpress.org/support/plugin/custom-menu-wizard/reviews/) * 3 replies * 2 participants * Last reply from: [wizzud](https://wordpress.org/support/users/wizzud/) * Last activity: [11 years, 9 months ago](https://wordpress.org/support/topic/horizontal-menu-12/#post-5242753) * Status: resolved