WordPress.org

Support

Support » Themes and Templates » [Resolved] [Theme: BlogoLife] Changing the alignment of specific menu items

[Resolved] [Theme: BlogoLife] Changing the alignment of specific menu items

  • TomerBu
    Member

    @tomerbu

    Howdy,

    I would like to align the last menu item to the right, while the rest of the menu is aligned to the left.
    I googled and found some useful information but nothing seemed to work for me.

    here is what i tried:
    in the “CSS Classes (optional)” field of the specific menu member, I filled with the string “become-far-right”. then edited the file “styles.css” and added: (is this the right file to edit?)

    ul.become-far-right {
    float:right;
    }

    I also tried finding the specific member number using firebug
    then added the following to my styles.css:
    .nav #menu-item-136 a {color: #c00; float: right;}

    the site address is: www.irwand.com

    Will greatly appreciate any help on the subject, as tried all that I could google and still didn’t get it to work for me.
    The menus are quite important, design wise and performance wise.

    Thanks in advance! I truly admire your work and assistance.

    http://wordpress.org/extend/themes/blogolife/

    [ Please do not bump, that’s not permitted here. ]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Andrew Nevins
    Forum moderator

    @anevins

    Please post your CSS and HTML in http://pastebin.com/

    TomerBu
    Member

    @tomerbu

    Hi, and thanks for your kind reply.
    here are the further details you required:

    styles.css:
    http://pastebin.com/RjN4Crpx

    HTML:
    http://pastebin.com/WASXT4Pv

    Thanks for all your help, I truly appreciate it.

    BTW: sorry for the late response, I didn’t get email alert to my registered email.

    TomerBu
    Member

    @tomerbu

    Can anyone point me in the right direction, please.
    The menu feature is quite important to me in a theme.

    Thanks.

    Andrew Nevins
    Forum moderator

    @anevins

    Add a width of 100% to your ul nav
    from

    nav ul {
    list-style: none;
    margin: 0px 0px;
    padding: 9px 0 0 0;
    display: inline-block;
    }

    to

    nav ul {
    width: 100%;
    list-style: none;
    margin: 0px 0px;
    padding: 9px 0 0 0;
    display: inline-block;
    }

    Assign a specific class to last menu item <li> element and add this style:

    nav ul li.lastElementClass{
     float: right;
    }

    TomerBu
    Member

    @tomerbu

    Yay! Thanks! it works.
    The thing I was really missing is setting the width to 100%

    my last item was probably already floating to the right – but not 100% width meaning the float-right is just the last item.

    Thank You!
    That meant the world to me.

    for future reference, this is what I used with the class setting in my first post.

    nav ul li.become-far-right {
    float:right;
    }

    and also added the 100% width to my menu as you suggested.

    Andrew Nevins
    Forum moderator

    @anevins

    Actually you used this in the first post

    ul.become-far-right {
    float:right;
    }

    Applying the style to the parent of the <li> element

    TomerBu
    Member

    @tomerbu

    I only meant the class definition, but thanks for the clarification. 🙂
    and for the elaborated explanation.
    I tried many variations, but didn’t get the 100% width part.

    Thanks!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘[Resolved] [Theme: BlogoLife] Changing the alignment of specific menu items’ is closed to new replies.