- This topic is empty.
-
AuthorPosts
-
January 22, 2015 at 10:28 am #193986melaniebundParticipant
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_itema, .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
January 22, 2015 at 10:53 am #193989ShikkedielParticipantAlthough 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’.
January 22, 2015 at 11:12 am #193991Paulie_DMemberAlthough 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.”
January 22, 2015 at 11:17 am #193994Paulie_DMemberIf 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 theul
and the anchors full width of their respectiveli
.A design image or a demo would be more useful.
Also, is the two column menu the sub-menu or the top level
ul
?January 22, 2015 at 3:21 pm #194019melaniebundParticipantHi 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]
January 23, 2015 at 3:00 am #194057Paulie_DMemberA 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.
January 25, 2015 at 2:48 pm #194213melaniebundParticipanti 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 SUBLINK8link to site
http://photohunters.org/photohunters/January 26, 2015 at 2:52 am #194223Paulie_DMemberSo 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?
January 26, 2015 at 4:07 am #194230melaniebundParticipantsorry 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
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.