WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Menu Item align Right (18 posts)

  1. becomebecome
    Member
    Posted 1 year 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!

  2. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

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

  3. becomebecome
    Member
    Posted 1 year 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!

  4. esmi
    Theme Diva & Forum Moderator
    Posted 1 year 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.

  5. becomebecome
    Member
    Posted 1 year 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

  6. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

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

  7. becomebecome
    Member
    Posted 1 year ago #

    Yes.

    Twenty Eleven last version.

  8. esmi
    Theme Diva & Forum Moderator
    Posted 1 year 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.

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

  10. becomebecome
    Member
    Posted 1 year 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

  11. 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/

  12. becomebecome
    Member
    Posted 1 year 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...

  13. 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?

  14. becomebecome
    Member
    Posted 1 year 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

  15. 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/

  16. becomebecome
    Member
    Posted 1 year ago #

    It worked

    =)

    Thank You!

  17. becomebecome
    Member
    Posted 1 year ago #

    Hello again, just a question about a detail I could not find googling...

    When I Edit CSS using :

    http://wordpress.org/extend/plugins/safecss/

    Which option should i select?

    - Add this to the Twenty Eleven theme's CSS stylesheet

    or

    - Start from scratch and just use this

    ...what are the consequences of selecting one or the other?
    I actually selected one for a few MU sites and the other for another few.
    Can't see a difference...

    Thanks

  18. Luke.vandenbosch
    Member
    Posted 1 year ago #

    I am trying to make the css that Ipstenu supplied above work. I cannot.

    I am placing the code in Appearance>Theme Options>CSS Settings

    using the theme tarnished from GhostPool

    What I am doing wrong?

Topic Closed

This topic has been closed to new replies.

About this Topic