Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author wizzud

    (@wizzud)

    As noted in one of the FAQs, CMW does not provide any styling at all. There is nothing in the CMW options that specifically/knowingly provides for outputting a menu that displays horizontally: it’s purely down to your theme. With no other influences, the output will display vertically because that’s the nature of a list (UL/OL).

    You can change the styling of any menu using your theme, possibly in conjunction with a specific id and/or classes set on the CMW menu in question. Exactly how you do that depends on all sorts of things (which is why CMW leaves it you!), such as :

    • your theme may already have CSS set up for a horizontal menu, whereby you simply need to add a class into the relevant CMW option
    • your theme may have an option that permits entry of custom CSS via admin, or you may have to modify a stylesheet (preferably in a child theme)
    • you may just want the level 1 items to be horizontal, with sub-menus menus vertical, or you may want all levels to be horizontal (or you may only have 1 level)
    • you may want javascript interaction to show sub-menus … or not
    • you may want any number of tweaks to spacing, colours, alignment, fonts, responsiveness, etc

    One way to get things “horizontal” is to float them (usually left). Another way is to set them to display inline, or inline-block. Whichever you use, you probably need some sort of qualifier (id or class) to target just that menu and its elements.

    If you were to provide an accessible example, and maybe expand a bit on your requirements (rather than just “horizontal”), then I might be able to be a bit a more specific with the CSS you could use?

    Hmm, may i butt in on this one as i just installed this wonderful plugin and ended up with the same trouble.

    Looking at my source code (of site https://klap.pe.hu/ ) i see there is CSS styles that have been applied to the shortcode output
    <div class="widget_custom_menu_wizard shortcode_custom_menu_wizard"><div class="menu-main-container"><ul id="menu-main" class="menu-widget " data-cmwv="3.1.3" data-cmws='{&quot;menu&quot;:3}'><li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page cmw-level-1 menu-item-23">
    But there’s no style sheet in the Plugins Editor, so i guess you must have used inline styles??

    Anyway, my theme has the option for custom styles, or maybe i could override the existing styles inline, adding style=”” to the shortcode??

    If you have the leisure, can you tell me (and whomever else might wanna know) what kind of inline or custom style i would have to write up to flip the menu to horizontal??

    Plugin Author wizzud

    (@wizzud)

    @presseroo
    As I stated above, “CMW does not supply any styling at all”.

    You’ve kindly provided a partial extract of the code produced by the CMW shortcode and, as you can see, there are no inline styles. Also, if you look at any of the CSS rules that are being applied to any of the elements, you will notice that they all come from your Onetake theme.

    Here’s 1 way to make your specific menu display horizontally:

    #menu-main {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    #menu-main li {
        display: inline-block;
        margin: 0 2em 0 0;
    }

    Thread Starter michaldybczak

    (@michaldybczak)

    I just need simple horizontal one level menu so I think that adding css changes to child theme as suggested above (left, inline, etc.) should do.

    Will work on it when I find time and let you know how it went.

    Oh how sweet and easy, thanks a million rugs wizzud
    Works like a charm already
    https://klap.pe.hu/

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Horizontal menu?’ is closed to new replies.