Responsive Menu Help

  • eggrace

    (@eggrace)


    7 years, 2 months ago

    Hi,
    I volunteered to redo our website.
    I created our first one on WordPress and now I am redesigning – but I am a bit of a novice.
    I am having problems with the responsive menu.
    I want a full width menu with Menu item and sub menus showing by default. And I cannot find a way to do it.
    Also I wanted to list the sub menus in two columns.
    I borrowed some CSS to do this but they appear jumbled. I have tried to alter the width but no success.
    The code is:
    .sub-menu-columns ul.sub-menu li {
    display: inline-block;
    float: left;
    width: 200px;
    }
    .sub-menu-columns ul.sub-menu li:nth-child(odd) {
    float: left;
    margin-right: 10px;
    }
    .sub-menu-columns ul.sub-menu li:nth-child(even) {
    float: right;
    }
    All i want is to have all my menus showing on toggle click.
    Then main menu item with submenu items below it in 2 columns.
    I am using Astra and I hoped it would be a simple excerise but it is proving beyond my experience.

    I would appreciate any guidence or pointers; I don’t ask for anyone spend their time doing it for me.
    Many thanks for your help

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Joy

    (@joyously)

    7 years, 2 months ago

    You should ask in your theme’s support forum, as each theme does menus differently and the menu CSS is often very tricky.

    Thread Starter eggrace

    (@eggrace)

    7 years, 2 months ago

    Thanks Joy, I have reposted there.
    Is there a simple trick to display all menu items including submenus is CSS that you know of?
    Thanks

    Thread Starter eggrace

    (@eggrace)

    7 years, 2 months ago

    Hi,
    I have used the following code:
    .sub-menu-columns ul.sub-menu li {
    display: inline-block;
    float: left;
    width: 200px;
    }
    .sub-menu-columns ul.sub-menu li:nth-child(odd) {
    float: left;
    margin-right: 10px;
    }
    .sub-menu-columns ul.sub-menu li:nth-child(even) {
    float: right;
    }

    But then the parent menu items get mixed in with the child items. And the the child item links don’t work.
    I have set the parent item to CSS Class sub-menu-columns

    I must be doing something basic wrong but I cannot work out how to fix.
    Can anybody help please?
    Thank you for your assistance

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Responsive Menu Help’ is closed to new replies.

Tags