Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS create a 2 column dropdown menu

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #193986
    melaniebund
    Participant

    Having trouble creating a 2 column dropdown menu, have tried a fixed width, with li ul li a 50 % but stays fixed in 1 column – hope someone can help
    my css

    .main-navigation li {margin-right:15px}
    .menu-main_menu-container { position:relative; z-index:1000; font-size:12px; font-family: ‘Lato’, 400, sans-serif; }
    .main-navigation { text-align: center;} /* margin-top is different in media queries /
    .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul { border-bottom: 0; border-top: 0;
    display: inline-block !important; text-align: center;}
    .main-navigation ul.nav-menu,.main-navigation div.nav-menu > ul {
    border: 0 none;
    padding: 0 0 0 0;
    text-align: center;
    font-size:11px;
    }
    .main-navigation li a:hover {
    color: #04c928;
    }
    /
    nav menu font color and bold font (font-weight)/
    .main-navigation li a {
    border-bottom: 0 none;
    color: #FFFFFF;
    font-weight: bold;
    font-size:12px;
    line-height: 3.69231;
    text-transform: uppercase;
    white-space: nowrap;
    }
    /
    current page nav font color & bold font*/
    .main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a, .main-navigation .current_page_item

    a, .main-navigation .current_page_ancestor > a {
    color: #04c928;
    font-weight: bold;
    }
    /background color of sub-menu (dropdown)/
    .main-navigation li ul li a {
    background:#000;
    /border-bottom: 1px solid #EDEDED;
    border-left: 1px solid #EDEDED;
    border-right: 1px solid #EDEDED;
    /
    display: inline-block;
    line-height: 1.18182;
    padding: 0.571429rem 0.714286rem;
    white-space: normal;
    width: 11rem;
    z-index: 3;
    font-size:12px;
    text-align:left;
    border:none;
    }
    /background & font color of sub0menu with mouse hover/
    .main-navigation li ul li a:hover {
    background: #333;
    color: #04c928;
    }
    .main-navigation li li {
    margin-left: -1em;
    }
    .main-navigation li.has-children > a:after {
    color: #fff;
    content: ‘ ▼’;
    font-size: 10px;
    vertical-align: 1px;
    }
    .main-navigation li li.has-children > a:after {
    color: #222;
    content: ‘ ►’;}

    thank you in advance Melanie

    #193989
    Shikkediel
    Participant

    Although a live example would be more helpful than posting the CSS, I don’t see any style for li itself that would prevent it from ‘line break’.

    #193991
    Paulie_D
    Moderator

    Although a live example would be more helpful than posting the CSS

    Especially as codedumps are usually removed by the Mods pretty quickly.

    Codepen is what we use for large amounts of code…please.

    “A demo is worth a thousand lines of code.”

    #193994
    Paulie_D
    Moderator

    If the anchor has a width of 50% it will be 50% of the parent li.

    It seems to me that for a “two column” menu (not sure how that would look) then the li should be 50% of the ul and the anchors full width of their respective li.

    A design image or a demo would be more useful.

    Also, is the two column menu the sub-menu or the top level ul?

    #194019
    melaniebund
    Participant

    Hi Paulie – my problem exactly – with the existing menu code, have no clue as to what to change in the css to create this the 2 column menu. Help would be greatly appreciated

    [MOD EDIT – CSS Codedump Removed to Codepen]

    http://codepen.io/Paulie-D/pen/yyXJxZ

    #194057
    Paulie_D
    Moderator

    A design image or a demo would be more useful.

    Also, is the two column menu the sub-menu or the top level ul?

    The CSS (especially in a Codedump like that) isn’t much help without the associated HTML and knowing what the finished result is supposed to look like.

    http://codepen.io/Paulie-D/pen/bNRemM

    #194213
    melaniebund
    Participant

    i put css here ” http://codepen.io/anon/pen/QwgxMEhi ” not too sure if it stayed as i had to back track to get here – the finished thing is supposed to look like
    TOPLINK 1 TOPLINK 2 TOPLINK 3 TOPLINK 4
    SUBLINK1 SUBLINK2
    SUBLINK3 SUBLINK4
    SUBLINK5 SUBLINK6
    SUBLINK7 SUBLINK8

    link to site
    http://photohunters.org/photohunters/

    #194223
    Paulie_D
    Moderator

    So the example I gave above doesn’t help with any ideas?

    Unfortunately, the Codepen link you gave doesn’t work and you’ve disabled right-clicking on the site so we can’t easily inspect your actual code to see what could be changed.

    It looks like a lot of the functionality of the menus is via WP Javascript which also makes things harder.

    You should know though that even disabling right-click doesn’t stop anyone from accessing your images. If you want to really protect them, use a watermark.

    See?

    #194230
    melaniebund
    Participant

    sorry i just realised i could click edit and see the code – yes just what i need thankyou and i will enable right click source and water mark – thank you again – will try a create the menu, it looks quite straight forward

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.