Menu Item align Right

  • Resolved becomebecome

    (@becomebecome)


    12 years ago

    Hello,

    Trying to configure one or two of my menu items to align right instead of left with the others.

    Google brought me to a couple of forums suggesting style.css editing as follows:
    Find the “menu-item” number for the element in the Menu I wish to “float right” then put the following line in the style.css:

    #header-menu-wrap #menu-item-717 {
    float: right;
    }

    or

    #menu-item-717 {
    float: right;
    }

    …one problem I encountered is that what looks like the same item in the style.css of the two sites installations I run under my Network, corresponds to two different “numbers”.
    I think it is because I use “Custom Menus” instead of the default one for both.

    So I went to the editing page of each site and I can’t seem to find a style.css to modify there. It is only available at Network admin level.

    When I apply those .css changes at Network admin level, nothing happens…

    Is there some other way to accomplish this?

    Thank You!

Viewing 15 replies - 1 through 15 (of 17 total)
1 2
  • esmi

    (@esmi)

    12 years ago

    Try using Firefox with the Firebug add-on for this kind of CSS work.
    http://getfirebug.com/

    Thread Starter becomebecome

    (@becomebecome)

    12 years ago

    When I click on EDIT under the HTML tab everything gets messed up and there’s no Search option available.
    If I do not click on EDIT, I´m not sure where should I put the new code in the “dented” structure of the code displayed.
    Or should I work in the CSS tab?
    …also
    The code mentioned above looks right to you?
    Do the changes I apply with Firebug stay encoded on the website css for other visitors in the future too or just me and my Firefox install?

    I mean do the changes Firebug apply get recorded at install level in the WP directory at my host provider?

    Sorry for so many beginner’s quetions, editing style.css looked much easier, but I’m glad to have the opportunity to learn something new and make it work.

    Thank You!

    esmi

    (@esmi)

    12 years ago

    Firebug just helps you to identify which bits of CSS you need to change or add. You then need to make those changes in your theme’s stylesheet – via Appearance -> Editor if necessary.

    Thread Starter becomebecome

    (@becomebecome)

    12 years ago

    That’s exactly my problem…

    I did find the items I need to modify using Firebug but style.css (Editor option) is only available at Network Admin level, not for individual sites.

    The items I need to modify are different from one site to another because (as far as I can tell) they are coded from custom site Menus, not from a general style.css common to both sites.

    Where do I go and change those bits of .css then?

    Thanks

    esmi

    (@esmi)

    12 years ago

    Are all/both sites using the same theme? If so, what theme?

    Thread Starter becomebecome

    (@becomebecome)

    12 years ago

    Yes.

    Twenty Eleven last version.

    esmi

    (@esmi)

    12 years ago

    Do not edit the Twenty Eleven theme. It is the default WordPress theme and having access to an unedited version of the theme is vital when dealing with a range of site issues. First create a child theme for your changes.

    Moderator Ipstenu (Mika Epstein)

    (@ipstenu)

    🏳️‍🌈 Advisor and Activist

    12 years ago

    If you need to edit css per site, you can use this: http://wordpress.org/extend/plugins/safecss/

    Thread Starter becomebecome

    (@becomebecome)

    12 years ago

    Installed the safecss plugin.

    Tried with the above code found on other forums googling the issue with item code from my two sites homepages here:

    http://becomebecome.com/

    and here

    http://aphorisms.becomebecome.com/

    clicked Preview…

    Nothing changes.

    =(

    How do I go about moving one Menu item to the right end of the Menu bar?
    Is this such a strange custom request?
    I seem to find so little info on the web about this…

    Thanks

    Moderator Ipstenu (Mika Epstein)

    (@ipstenu)

    🏳️‍🌈 Advisor and Activist

    12 years ago

    I’ve never used the preview function actually. Heh.

    First, make sure you’re not looking at cached content.

    I put in 

    #secondary {
text-align: right;
}

    Worked fine. See http://test.ipstenu.org/

    Thread Starter becomebecome

    (@becomebecome)

    12 years ago

    mmmh,

    tried to put the exact text you suggest in Style.css and nothing changes.

    Created a couple of button named TEST and MORE in the Menu.

    Changed your text to:

    #TEST {
    text-align: right;
    }

    …and it did not move it to the right.
    Not to the right of the Menu items (MORE is still last),
    nor to the extreme right of the Menu, which is what I want to accomplish.

    Hmmmm…

    PS – Delete the buttons while I wait for new developments on this…

    Moderator Ipstenu (Mika Epstein)

    (@ipstenu)

    🏳️‍🌈 Advisor and Activist

    12 years ago

    That won’t work, unless you’ve defined #test as the CSS call in the menu.

    How do I go about moving one Menu item to the right end of the Menu bar?

    The top menu bar? You mean you want ONE item in the menu to be all the way to the right, as if it were a separate menu?

    Thread Starter becomebecome

    (@becomebecome)

    12 years ago

    Yes,

    the TOP Menu bar, which is a custom Menu where the usual Home button is found alongside a couple others.

    I want to add and About button, and I want it all the way to the right, not floating left with the others.

    Menu bar is visible here:

    http://www.becomebecome.com

    Thanks

    Moderator Ipstenu (Mika Epstein)

    (@ipstenu)

    🏳️‍🌈 Advisor and Activist

    12 years ago

    Oy.

    Okay. The easiest would be to this.

    Make your menu. Then click on ‘screen options’ and check ‘CSS classes’

    With that available, edit the ‘about’ menu item, and you’ll see an option for CSS Classes (optional).

    In there, put become-far-right.

    In your CSS use this:

    li.become-far-right {
float:right!important
}

    See it in action at http://test.ipstenu.org/

    Thread Starter becomebecome

    (@becomebecome)

    12 years ago

    It worked

    =)

    Thank You!

Viewing 15 replies - 1 through 15 (of 17 total)
1 2
  • The topic ‘Menu Item align Right’ is closed to new replies.