Community Forums › Forums › Archived Forums › Design Tips and Tricks › Genesis, I want last menu item dropdown to left
- This topic has 6 replies, 3 voices, and was last updated 9 years, 11 months ago by Lauren @ OnceCoupled.
-
AuthorPosts
-
May 1, 2014 at 1:12 pm #1032143dronMember
The site in question is blog.gembaacademy.com
I am using the regular menuing system and everything works as I want. Except I want the last dropdown menu (first in my right to left float order) to appear to the left.
I have tried all the solutions listed in this forum and could not get anything to work.
Thanks for any help in adavnce.
Ron
Here is my css:
/* Navigation Constants
------------------------------------------------------------ */li:hover ul ul,
li.sfHover ul ul {
left: -9999px;
}li:hover,
li.sfHover {
position: static;
}li a .sf-sub-indicator {
position: absolute;
text-indent: -9999px;
}/* Header / Primary / Secondary Navigation
------------------------------------------------------------ */.menu-primary,
.menu-secondary,
#header .menu {
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
}.menu-primary li,
.menu-secondary li,
#header .menu li {
float: right;
list-style-type: none;
}#header .menu {
float: right;
width: auto;
}
.menu-primary li a,
.menu-secondary li a {
font-family: 'ITCOfficinaSerifStdBookRg';
color: #000;
display: block;
font-size: 18px;
line-height: 20px;
padding: 8px 14px 10px 13px;
position: relative;
text-decoration: none;
}#header .menu li a {
font-family: 'ITCOfficinaSerifStdBookRg';
color: #096932;
display: block;
font-size: 18px;
line-height: 20px;
padding: 8px 14px 10px 13px;
position: relative;
text-decoration: none;
}.menu-primary li a:active,
.menu-primary li a:hover,
.menu-primary .current_page_item a,
.menu-primary .current-cat a,
.menu-primary .current-menu-item a,
.menu-secondary li a:active,
.menu-secondary li a:hover,
.menu-secondary .current_page_item a,
.menu-secondary .current-cat a,
.menu-secondary .current-menu-item a,
#header .menu li a:active,
#header .menu li a:hover,
#header .menu .current_page_item a,
#header .menu .current-cat a,
#header .menu .current-menu-item a {
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
background-color: #ffa800;
border-radius: 6px;
color: #FFF;
}.menu-primary li li a,
.menu-primary li li a:link,
.menu-primary li li a:visited,
.menu-secondary li li a,
.menu-secondary li li a:link,
.menu-secondary li li a:visited,
#header .menu li li a,
#header .menu li li a:link,
#header .menu li li a:visited {
-moz-border-radius: 0px 0px 6px 6px;
-webkit-border-radius: 0px 0px 6px 6px;
background: none;
border-radius: 0px 0px 6px 6px;
box-shadow: none;
color: #000;
font-size: 18px;
line-height: 10px;
padding: 15px 14px 5px 13px;
position: relative;
text-transform: none;
width: 198px;
}.menu-primary li li:last-child a,
.menu-secondary li li:last-child a,
#header .menu li li:last-child a {
border: none;
}.menu-primary li li a:active,
.menu-primary li li a:hover,
.menu-secondary li li a:active,
.menu-secondary li li a:hover,
#header .menu li li a:active,
#header .menu li li a:hover {
color: #fff;
}.menu-primary li ul,
.menu-secondary li ul,
#header .menu li ul {
-moz-border-radius: 0px 6px 6px 6px;
-webkit-border-radius: 0px 6px 6px 6px;
background-color: #ffa800;
border-radius: 0px 6px 6px 6px;
height: auto;
left: -9999px;
margin: -5px 0 0;
padding: 10px 10px 15px 15px;
position: absolute;
width: 208px;
z-index: 9999;
}.menu-primary li ul a,
.menu-secondary li ul a,
#header .menu li ul a {
width: 130px;
}.menu-primary li ul ul,
.menu-secondary li ul ul,
#header .menu li ul ul {
margin: -34px 0 0 149px;
}ul.menu li:hover>ul,
http://blog.gembaacademy.com
ul.menu li.sfHover ul,
#header .menu li:hover>ul,
#header .menu li.sfHover ul {
left:auto;
}May 1, 2014 at 3:00 pm #103234Lauren @ OnceCoupledMemberSo you could do something like
#header .menu li:first-child ul { margin-left: -150px; };
But you'll need to fix some other styles too, like the rounded corners.
Best,
Lauren
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
May 1, 2014 at 8:04 pm #103262RobodashyMemberJust a question from a usability standpoint - I noticed that upon resizing the browser window your navigation menu changes - basically the items reverse order.
Has this been done for a reason? Or is this just until the "list-item to the left" issue has been resolved?
I used Lauren's method to fix the same issue on my site - however one thing to remember is that you will also need to go and make these changes within your media queries as the pixel width may be different.
+1 to Lauren's answer (if there was a voting method I'd do that 😛 ).
The large print giveth, and the small print taketh away.
– Tom Waits, “Step Right Up”May 5, 2014 at 11:47 am #1037203dronMemberSorry, the solution does not seem to work for me. I have emptied cache and tried on Chrome, Safari and IE. The last drop-down is not flipped. And remember this is for blog.gembaacademy.com (not the root domain www, which is not wordpress)
Also, I dont want the order to flip when browser is sized smaller, what do I have wrong?
Thanks
Ron
May 5, 2014 at 12:33 pm #103725Lauren @ OnceCoupledMemberHey Ron,
It definitely will work, I've tested it with the browser inspector. I don't see it in your code though.
Your list order is reversed because you are floating the elements to the right. If you want it to stay reversed at smaller screen sizes, you need to apply that same style within your @media queries, at the bottom of your style.css.
BTW, @Robodashy, thanks for the up vote! 😉
Best,
Lauren
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
May 5, 2014 at 12:41 pm #1037273dronMemberIf I go to http://blog.gembaacademy.com/ then view source (view-source:http://blog.gembaacademy.com/) I can see my style sheets. I then go to: http://blog.gembaacademy.com/wp-content/themes/agency/style.css?ver=2.0.2
You will see this line added to bottom of those menu styles before.
//vdg
#header .menu li:first-child ul {
margin-left: -150px;
};🙂
Help, am I missing something?
Ron
May 5, 2014 at 1:14 pm #103733Lauren @ OnceCoupledMember// isn't the proper comment structure in CSS. Instead, use
/* comment_here */
. Your code should work after that. 🙂
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.