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

  • Resolved TomerBu

    (@tomerbu)


    11 years, 9 months 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. ]

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

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 8 months ago

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

    Thread Starter TomerBu

    (@tomerbu)

    11 years, 8 months 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.

    Thread Starter TomerBu

    (@tomerbu)

    11 years, 8 months ago

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

    Thanks.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 8 months 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;
}

    Thread Starter TomerBu

    (@tomerbu)

    11 years, 8 months 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.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 8 months 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

    Thread Starter TomerBu

    (@tomerbu)

    11 years, 8 months 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!

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