Archived

This topic is now archived and is closed to further replies.

  • 0

Navigation customisation


Question

Posted · Report post

Hello,

 

I am having trouble with the main nav colours of the site currently being worked on. This may prove tricky to explain, but here goes...

 

On this page (part of the PermCalc section), roll over the PermCalc menu, then on the drop down menu the current page is highlighted in the buff colour. All other pages are coloured light blue and do not appear to change when rolled over.

 

I would like the colours to swap round if possible so the current page is highlighted in blue and other pages in buff. This happens if you roll over a menu which is not a parent of the current page being viewed.

 

When rolling over another drop down menu (eg. Services) everything looks OK. 

 

Code for nav here:

 

#nav {background: #a78c77 !important; border-top: 2px solid #ffffff !important}
#nav .content-pad, #secondnav .content-pad {padding-bottom: 0px !important; padding-top: 0px !important}
.navigation_wrap {border-bottom: 0px !important}
.main_nav {font-size: 16px;}
.main_nav li a {padding-left: 10px !important; border-left: 1px solid #ffffff !important; padding-right: 10px !important; color: #ffffff}
.main_nav li a:hover {color:#ffffff !important; background: #00adea !important}
.main-nav .current-menu-ancestor a, .main-nav li.current-menu-ancestor ul a, .main-nav li.current_page_item a, .main-nav li.current-menu-item a, .main-nav li.current_page_parent a {color:#ffffff !important; background: #00adea !important;}
.page-item-470 {border-right: 1px solid #ffffff}
.main-nav li:hover, .main-nav .current-page-ancestor a,  .main-nav li.current-page-ancestor ul a, .main-nav li.current_page_item a, .main-nav li.current-menu-item a, .sf-menu li li, .sf-menu li li li {background-color:#afac91 !important;}
.page-item-974, .page-item-21, .page-item-157, .page-item-992 {margin-top: 5px !important;}

 

 

I hope that makes sense! Thanks in advance

 

Phil

Share this post


Link to post
Share on other sites

15 answers to this question

Posted · Report post

Hi Phil

 

We did change the sidebar order in one of the previous editions which confused all the widgets. In order to preserve your widgets, move them all into the inactive area at the bottom of the widget page so they are safe. After updating you can then slide them back into the correct sidebar.

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

No, upgrades don't cost any money. (Only the major upgrade, to PageLines Framework 3 for example, would require some kind of additional cost)

Share this post


Link to post
Share on other sites

Posted · Report post

James... many thanks will give this a go.

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks Catrina. One final thought, if we update to the later PageLines, will the CSS we have added stop working because the later version uses different classes?

 

Just trying to avoid a major headache having to redo everything.

 

Many thanks,

 

Phil Chandler

Share this post


Link to post
Share on other sites

Posted · Report post

Is this topic now resolved ?

Share this post


Link to post
Share on other sites

Posted · Report post

Phil,

 

It's highly unlikely, but there may be some very minor instances where an element changes.  Using Firebug, this should be easily resolved.  If there's any headache, it's going to be one of those little ones, not major.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Phil - Were you able to figure this out? In the middle of me looking at your site to troubleshoot it started to work correctly with the colors in the Navigation.

Share this post


Link to post
Share on other sites

Posted · Report post

Dear all,

 

At last, we finally got round to updating to the latest Pagelines Framework (2.4.1). After deactivating all plugins first, upon updating all widget information seemed to disappear and had to be re-inputted manually. Not fun.

 

We've got a couple of other sites that we'd also like to upgrade from 2.0.1 to 2.4.1... but want to avoid this headache again. Should we have done anything different?

 

Many thanks,

 

Phil Chandler

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Mackenzie,

 

No, I haven't worked on the site since posting the original question.

 

I hope the explanation made sense... The issue is that the background colours of the parent drop down menu (of the page being viewed) are the wrong way round. See attached file if that helps!

 

Many thanks,

 

Phil

 

post-31441-0-69213900-1359103170_thumb.j

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

 

You're using !important in your CSS, which can cause issue with other states of your navigation. I recommend you review our custom CSS doc and use the PageLines overrides instead.

 

http://support.pagelines.me/docs/customization/custom-css/

 

Also, there is a plugin on the PageLines store, which allows you to easily change the colors of the Nav Classic, which you;re using.

 

I recommend you update to the latest version of PageLines Framework. You're currently using version 2.0.1, which is roughly about one year old.

 

Perform a backup of your website, custom code etc... just as a precaution.

Share this post


Link to post
Share on other sites

Posted · Report post

Danny,

 

Thanks for your reply.

 

I removed all the code relating to the main nav, however the Simple CSS plugin had no effect.

 

Am worried about updating PageLines Framework as I don't want it to screw up the site and see doing so as a last resort (the site is live after all).

 

Is there no quick fix by tweaking my amateur coding?!?

 

Many thanks,

 

Phil

Share this post


Link to post
Share on other sites

Posted · Report post

Unfortunately, we are unable to provide you the custom CSS needed to achieve your style.

 

If you're not comfortable with custom CSS or code. I recommend you contact one of our Pros

 

http://www.pagelines.com/pros/

 

for assistance or check out our CSS Customization section in our Doc Center to give you a good headstart on CSS changes you can make

 

 http://support.pagel...ion/custom-css/

Share this post


Link to post
Share on other sites

Posted · Report post

Danny,

 

The quote on the PageLines Forum says: "have a question about CSS or PHP customizations? We can help point you in the right direction. Just remember we can't design your site for you."

 

So, I'm not asking you to design the site. I've done that. I just hoped someone would be kind enough to point in the right direction where I've gone wrong! I don't think I'm asking much.

 

PageLines has always given us good support in the past. Can anyone else help please?

 

Many thanks,

 

Phil

Share this post


Link to post
Share on other sites

Posted · Report post

Phil, I have already informed you of your issues above:

 

1. You're using PageLines Framework version 2.0.1, which is like I mentioned nearly a year old and in not updating, you may be putting your site in jeopardy i.e. security risk.

2. You're using !important declaration in your CSS.

 

In order to correctly override PageLines CSS, you need to use one of the PageLines overrides, more information on the overrides is available on the Custom CSS link I provided you above. Another thing to note is that when using !important it overrides everything, so the first thing you need to do is remove this declaration from your CSS. Removing !important and starting again using the PageLines overrides will make your life much easier.

 

Once removed, inspect the navigation to correctly find the selectors/classes using Firebug or your browsers built-in web dev tools. Once found, use them to correctly configure your CSS and style your navigation.

 

For example:

 

You're using this CSS:

 

#nav {background: #A78C77 !important;
border-top: 2px solid white !important;
} 

Instead you should use this:

#site #nav {
background: #A78C77;
border-top: 2px solid white;
}

But you're making your life more difficult using the PageLines version you're using, as with the latest version all sections have unique classes. These classes, make your life super easy and there would be no need to use the following CSS, all you would need to do is inspect the section and view the class being used, usually it should look like this:

 

.section-nav

.section-hero

.section-navbar

 

and so on, but with you using the version you're, these classes are not available.

 

Also, read the Wordpress article here for menu item CSS classes - http://codex.wordpress.org/Function_Reference/wp_nav_menu#Menu_Item_CSS_Classes

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Danny,

 

OK, thanks for your help. It sounds like we should upgrade PageLines 2.01 to version 2.4 – are we able to upgrade to this version without any additional cost?

 

We've held off upgrading PageLines to date – we'd heard others have had problems with their sites breaking after upgrading.

 

Many thanks,

 

Phil

Share this post


Link to post
Share on other sites