WordPress.org

Forums

BlogoLife
[resolved] Changing the alignment of specific menu items (8 posts)

  1. TomerBu
    Member
    Posted 2 years ago #

    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. ]

  2. Andrew
    Forum moderator
    Posted 2 years ago #

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

  3. TomerBu
    Member
    Posted 2 years ago #

    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.

  4. TomerBu
    Member
    Posted 2 years ago #

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

    Thanks.

  5. Andrew
    Forum moderator
    Posted 2 years ago #

    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;
    }
  6. TomerBu
    Member
    Posted 2 years ago #

    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.

  7. Andrew
    Forum moderator
    Posted 2 years ago #

    Actually you used this in the first post

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

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

  8. TomerBu
    Member
    Posted 2 years ago #

    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!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags