Align single nav item to the right (change from CE3 to to CE4)

MoritzCH · 2014-11-24 22:37:41

Hi,

another question regarding the change from CE3 to CE4. I used this code to align the last item in the navigation container (multi level menu) to the right:

phplugins.php

<li class="last"><a href="#">LiveBlog (Currently disabled)</a></li>

custom.css

li.last {
 float: right;
 }

in CE4 it does not work anymore. Did you changed some of the hardcoded stuff?

Thank you in advance
Moritz

rod barbee · 2014-11-24 23:32:08

the navigation selectors are different in CE4. You're CE3 plugins code won't work.
Use Firebug, Chrome Tools, or your browser's built in inspector to take a look at the new IDs and classes containing the navigation.

For example, there's the new r2-d2-menu id for the navigation.

the ul with the id of "nav" looks to be limited to the combined width of the nav items (at least on my development site). So floating the last <li> element right won't really seem to do much anyway.

I suppose you could try adding another <ul> directly after <ul id="nav"> and float that to the right

something like this maybe? I've not tried this, it's just a guess.

<div id="r2-d2-menu".
       <ul id="pull">  (you may or may not have this, depending on your design)
           <ul id="nav">    (contains all nav items but your last item)
                   <li> ....  </li>
                   <li> ....  </li>....
           </ul>
           <ul id="nav-right" style="float:right;">     (new <ul> use inline styling or use the custom class)
                    <li class="last">   (actual last nav item) </li>
            </ul>
        </ul>
</div>

MoritzCH · 2014-11-24 23:41:29

Working like a charm! Seems that I have to get some information what have changed recently.

Thank you

rod barbee · 2014-11-24 23:45:43

Really? It worked? Hot damn!

MoritzCH · 2014-11-26 05:39:49

Well it did worked on the page and gallery template but not on the autoindex template ... this worked out for me:

<ul id="nav-right" style="float:right;">

changed to

<ul id="nav" style="float:right;">

... don't know why but now it works

rod barbee · 2014-11-26 06:43:16

I just made up the id="nav-right". You'd have to create the custom css for that id.

Community @ The Turning Gate

#1 2014-11-24 22:37:41

Align single nav item to the right (change from CE3 to to CE4)

#2 2014-11-24 23:32:08

Re: Align single nav item to the right (change from CE3 to to CE4)

#3 2014-11-24 23:41:29

Re: Align single nav item to the right (change from CE3 to to CE4)

#4 2014-11-24 23:45:43

Re: Align single nav item to the right (change from CE3 to to CE4)

#5 2014-11-26 05:39:49

Re: Align single nav item to the right (change from CE3 to to CE4)

#6 2014-11-26 06:43:16

Re: Align single nav item to the right (change from CE3 to to CE4)

Board footer