CSS to move menu to left side Help!

  • Unknown's avatar
    jessicawhalenphotography · Member ·

    Hi! I’m in need of CSS help for a relative beginner. I need to make the “Menu” page on searbuffalo.wordpress.com look VERY similar to this:

    http://rpmrestaurants.com/rpmsteak/chicago/menu/

    Where the menu headings are listed off to the left, I need each to open a PDF menu in another window.

    My headings will be “Lunch Menu” “Dinner Menu” “Dessert Menu” “After Dinner Drinks” “Wine List” “Cocktail List”

    Thanks in advance!

    PS- I CANNOT change my wordpress theme. Thanks!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, on the site you reference, their menu is held to the right by the logo. The following floats the menu to the left and adds the styling like on your reference site. See what you think. 

    @media screen and (min-width: 993px) {
.main-navigation.pull-right {
    float: left !important;
}
.main-navigation .current-menu-item a, .main-navigation .current_page_item a {
    border-bottom: 1px solid #fff;
    border-radius: 0;
}
.main-navigation a {
    border-radius: 0;
    margin-bottom: 0;
    padding-left: 0;
    padding-right: 0;
}
.main-navigation li {
    margin-left: 0;
    border-right: 1px solid;
    padding-left: 20px;
    padding-right: 20px;
}
}

    I’ve limited this to screens/windows 993px and wider. At 992px and narrower, the touch device menu activates and the above would cause issues with that.

  • The topic ‘CSS to move menu to left side Help!’ is closed to new replies.