Jump to content
Sign in to follow this  
pcgs

PlatformPro: align nav bar to the right

Recommended Posts

pcgs

How can I align the nav bar to the right? I tried using firebug to identify selectors to affect the "float:right" rule but it doesn't work. I found a post that asked this question and the only person who answered it posted a bunch of guesses. None of which would work. The video in the documentation is for WhiteHouse and doesn't seem to apply to PlatformPro. This should be simple if the right selector is targeted. Hope someone knows how. Thanks.

Share this post


Link to post
Share on other sites
bryan-hadaway

Get me a link and I'll see about writing a solution for you. Thanks, Bryan

Share this post


Link to post
Share on other sites
pcgs

Thanks Bryan, I'll need to transfer my stie to a remote server and will post a link ASAP. Using MAMP on localhost.

Share this post


Link to post
Share on other sites
pcgs

Okay, here's the URL: <http://www.handsonpaws.com/dog-trainer/> For some reason the site is really slow but can't worry about that just now. I tried using the following in base.css with no luck: (In firebug this works) #primary-nav ul.sf-menu li { float:right ;} But once I added this rule I review it again in firebug, it sees another file called superfish.css which I cannot edit from the Appearance>Editor panel. So I added the dreaded !important to my rule in base.css Using !important it works but wonder if there is a better way. And my new problem is while the nav bar appears on the right, the dropdowns fly to the right off the page. So I try adding this: #primary-nav ul.sf-menu li a{ float:left !important;} But it didn't work. Perhaps the rule I used isn't the right one OR I need additional rules. This rule below also works but with the same results as above which makes the dropdowns fly out off the page container. #primary-nav .content-pad li{ float:right !important;} Will be interesting to see what you come up with. Thanks!

Share this post


Link to post
Share on other sites
cmunns

In base.css you could use this ` body #primary-nav ul.sf-menu li { float:right ;} body #primary-nav ul.sf-menu li:hover ul, body #primary-nav ul.sf-menu li.sfHover ul {right:-6px;left:auto;} `

Share this post


Link to post
Share on other sites
pcgs

Thanks Adam! Worked like a charm. I would never have figured those selectors from Firebug. I am marking yours as the answer that works. I see this Karma system is definitely working.

Share this post


Link to post
Share on other sites
scottsemple

As described above, I added: `

body #primary-nav ul.sf-menu li { float:right;}

` ...to base.css, but my menu for http://amblerkids.massivemouse.com is still floated to the left rather than the right. Is this correct?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×