Community Forums › Forums › Archived Forums › Design Tips and Tricks › nav menu items are backwards
- This topic has 3 replies, 2 voices, and was last updated 10 years, 3 months ago by David Chu.
-
AuthorPosts
-
January 2, 2014 at 12:38 pm #82721masonjarsaladsMember
Still working on my media queries, the nav menu items are displaying backwards. I am thinking this is an easy fix but can't figure out.
Does anyone know which code is incorrect? I really appreciate the help!
@media only screen and (max-width: 1139px) {.site-inner,
.wrap {
max-width: 960px;
}.content-sidebar-sidebar .content-sidebar-wrap {
float: left;
}
.content-sidebar-sidebar .content-sidebar-wrap,
.sidebar-content-sidebar .content-sidebar-wrap,
.sidebar-sidebar-content .content-sidebar-wrap {
width: 740px;
}.content,
.site-header .widget-area {
width: 620px;
}.sidebar-content-sidebar .content,
.sidebar-sidebar-content .content,
.content-sidebar-sidebar .content {
width: 400px;
}.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.sidebar-primary,
.title-area {
width: 300px;
}.genesis-nav-menu a {
border: none;
color: #686868;
display: inline-block;
padding: 2px 3px 1px;
position: relative;
}
}
@media only screen and (max-width: 1023px) {body {
background-color: #fff;
}.content,
.content-sidebar-sidebar .content,
.content-sidebar-sidebar .content-sidebar-wrap,
.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.sidebar-content-sidebar .content,
.sidebar-content-sidebar .content-sidebar-wrap,
.sidebar-primary,
.sidebar-secondary,
.sidebar-sidebar-content .content,
.sidebar-sidebar-content .content-sidebar-wrap,
.site-header .widget-area,
.site-inner,
.title-area,
.wrap {
width: 90%;
}.site-header .wrap {
padding: 5px 0;
padding: 1rem 0;
}.header-image .site-header .wrap {
background-position: center top;
}.archive-description,
.author-box,
.comment-respond,
.entry,
.entry-comments,
.entry-footer .entry-meta,
.header-image .site-header .widget-area,
.sidebar .widget,
.site-header {
padding: 0;}
.genesis-nav-menu li,
.site-header ul.genesis-nav-menu,
.site-header .search-form {
float: right;
}.genesis-nav-menu,
.site-description,
.site-header .title-area,
.site-header .search-form,
.site-title {
text-align: left;
}.genesis-nav-menu a,
.genesis-nav-menu > .first > a,
.genesis-nav-menu > .last > a {
padding: 20px 16px;
padding: 2rem 1.6rem;}
.site-header .search-form {
margin: 16px auto ;
margin: 1.6rem auto;
}.genesis-nav-menu li.right {
display: none;
}.entry-footer .entry-meta {
margin: 0;
padding-top: 12px;
padding-top: 1.2rem;
}.sidebar .widget.enews-widget {
padding: 20px;
padding: 2rem;
}.site-footer {
padding: 24px 0;
padding: 2.4rem 0;
}.footer-widgets {
padding: 40px 5% 16px;
}.footer-widgets-1 {
margin: 0;
}.site-header {
http://www.masonjarsalads.com
background-color: #fff;
border-bottom: dashed 1.5px #424242;
margin-left: 5px;
margin-right: 5px;
}
.nav-primary {
border-bottom: dashed 1.5px #424242;
margin-left: 5px;
margin-right: 5px;
}
}January 2, 2014 at 1:42 pm #82729David ChuParticipantYup,
That's an easy one. As soon as you float list items to the right, you'll get them in backwards order. If you want those further to the right, you'll need to move the container right instead of the list items themselves..genesis-nav-menu li,
.site-header ul.genesis-nav-menu,
.site-header .search-form {
float: right;
}Cheers, Dave
Dave Chu · Custom WordPress Developer – likes collaborating with Designers
January 2, 2014 at 1:53 pm #82734masonjarsaladsMemberAwesome, thanks!
January 2, 2014 at 2:08 pm #82740David ChuParticipant😉
Cool!I don't make sites in right-to-left languages (yet), but I'll bet they use "float: right" a lot.
Dave Chu · Custom WordPress Developer – likes collaborating with Designers
-
AuthorPosts
- The topic ‘nav menu items are backwards’ is closed to new replies.