WordPress.org

Ready to get started?Download WordPress

Forums

Cazuela
[resolved] How to make submenu horizontal and centered underneath its parent? (14 posts)

  1. domdomdom
    Member
    Posted 8 months ago #

    Hello,
    As in subject, I'd like to make my submenu horizontal and centered underneath its parent..

    I'm fairly new to css. I have previously set horizontal menus in other themes (display: inline-block) - but can't seem to work it out on Cazuela for some reason?
    The website I'm working on has a maintenance mode on so can't forward you too look at it sorry..

    Thanks a lot in advance,
    Dom

  2. Andrew
    Forum Moderator
    Posted 8 months ago #

    Hopefully you can replicate the issue in a CSS sandbox and link us that http://cssdesk.com

  3. domdomdom
    Member
    Posted 8 months ago #

    I'll try to replicate it now Andrew thanks! :)

  4. domdomdom
    Member
    Posted 8 months ago #

    Hi again Andrew :)

    Haven't managed to replicate it, was taking me ages... it's a great theme but so many options I got confused.. thanks for trying to help!

    I think I got them inline now, but they're all stacked up on top of each other :/ will try to work it out!

    P.S. If you'd be up for having a look could quickly create a user for you to log in and have a look at the site? No worries if you're busy though :)

    Dom :)

  5. Andrew
    Forum Moderator
    Posted 8 months ago #

    Although I can profess to be trying to help you, it's not safe to give me your login credentials even if you create a dummy account for me with low privileges. So, you should avoid giving out your credentials to anyone.

  6. Andrew
    Forum Moderator
    Posted 8 months ago #

    Here's how you generally center things: http://www.w3.org/Style/Examples/007/center.en.html

    If you search threads on WordPress.org you should find some tips of how other people have centred their menu, usually with the styles below:

    display: table;
    margin: 0 auto;
  7. domdomdom
    Member
    Posted 8 months ago #

    that's cool thanks for your advice. I'm not keen on giving access, but seen people do it here on forums, but you're right!

    I'll read the material you've given me and will try to work it out. Go trial and error eh? :) I think I'm just having trouble with this theme- even though it's great- as it seems to have so many different names for the same thing, like different name for the nav menu in css than in html due to lots of colour options.. sorry needed a bit of a moan! :)

    Thanks Andrew :)

  8. domdomdom
    Member
    Posted 8 months ago #

    Hi again!

    I quickly duplicated cazuela theme & my basic custom css into my another page -
    http://wondersomethings.com

    Any chance you could look at the menu and maybe possibly hopefully let me know how to make submenu horizontal & centered under the parent? :)
    (I don't even know what happened to the first menu item's submenu there, which come up one by one now.. weird)

    Would be so ever graciously grateful, because I didn't manage to work it out throughout the day- tried changing margins, positions etc... =/

  9. domdomdom
    Member
    Posted 8 months ago #

    Hi! Hi again :)

    After a few (5) days of trying to work out this horizontal menu problem of mine, reading numerous sources online etc etc etc, I still can't work out where my problem lies of not being able to make my submenu horizontal & centred under it's parent...

    I managed to recreate the problem in cssdesk-->

    Here's my HTML and my CSS:
    http://cssdesk.com/r7gZf

    And here's my HTML and Cazuela theme's CSS, in case I'm missing something in this CSS that's causing my despair..?
    http://cssdesk.com/Th9E9

    Thanks for all your help. If someone can help me solve this problem, it would made my day, and probably, my week too :)

    Thanks in advance,
    Dom

  10. Andrew
    Forum Moderator
    Posted 8 months ago #

    First get rid of the relative position on the <li>

  11. Andrew
    Forum Moderator
    Posted 8 months ago #

    You can give the relative position to the <ul> that contains the entire menu if that's how wide you want it.

    Then get rid of your width: auto; style on the submenu.

  12. domdomdom
    Member
    Posted 8 months ago #

    Hi Andrew- thanks for help. I've tried that to no avail. Someone helped me yesterday to sort it out by adding classes to each menu item. Phew, it finally works :)

  13. Andrew
    Forum Moderator
    Posted 8 months ago #

    See my added styles at the bottom of the CSS on this CSSDesk page: http://cssdesk.com/ct4ze

    I've titled my added styles with:

    /* FOR CLARIFICATION
       I've separated the styles */
  14. domdomdom
    Member
    Posted 7 months ago #

    HI sorry Andrew for late reply- didn't see your message! Thanks a lot for this, really appreciate your help! :) D

Reply

You must log in to post.

About this Theme

About this Topic