Jump to content
gabriel1937

Navigation customisation

Recommended Posts

gabriel1937    0
gabriel1937

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
mackenzie    12
mackenzie

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.


Mackenzie - PageLines Help Desk

The Centsible Family - Writer, Photographer and Coffee Addict

---------------------------------------------------

Kindly search this forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

Share this post


Link to post
Share on other sites
gabriel1937    0
gabriel1937

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
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
gabriel1937    0
gabriel1937

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
Danny    1,327
Danny

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/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
gabriel1937    0
gabriel1937

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
Danny    1,327
Danny

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

  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
gabriel1937    0
gabriel1937

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
catrina    103
catrina

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


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
gabriel1937    0
gabriel1937

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
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
gabriel1937    0
gabriel1937

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
James B    436
James B

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.

  • Like 1

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
gabriel1937    0
gabriel1937

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

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Is this topic now resolved ?


Please search our forums, before posting!

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


  • Similar Content

    • bnapoli
      By bnapoli+
      http://731.34b.myftpupload.com/ this website is using the NavPro navigation in Platform 5. It has a lot of menu items, so it breaks to two lines when the window is sized down. What is the media query to make the navigation either a) switch to "mobile mode" at a higher width, or b ) expand the nav into two lines. Thanks
    • nadielp
      By nadielp+
      Hi Everyone,
      I am trying to get a single navigation item to center. I am using a scroll menu in the navigation component of Impulse. I would like to have the item in the center of the page but it defaults right. I tried setting the item to center a few different ways and nothing is working. I added {
        display: inline-block;
        position: relative;
        text-align: center;
      }
      but that didn't work...any help would be appreciated. Site is at http://vetpaw.org/new
       
      Thanks!
      Daniel
    • yemoonyah
      By yemoonyah+
      I just installed and added the Flipper section to my home page and it makes my navigation/menu bar items disappear.
      They do show up again when scrolling down and everything seems normal on the other pages.
      http://yemoonyah.com
      Thanks.
       
    • Houston Haynes
      By Houston Haynes+
      I'm still "piercing the veil" of platform 5, with page navigation the current subject of interest. I worked with a few plugins (the most useful being Next Page Not Next Post) but I wanted to take a step back and start with an example - and see if I could get a bit of help "inside the beltway". 
      What I'm looking to do is substantially similar to the pagelines docs pages - see my annotated screenshots attached. At the top of a "child" page I want a link back to the "parent" page - and at the bottom of that "child" page I want to place a similar link to the "grandchild" page. At the bottom of each grandchild page I want there to be navigation "buttons" to sibling pages in the hierarchy. 
      "Next Page Not Next Post" handles what I'm expecting for "sibling" navigation, but I'm having a bit of trouble getting over the logistical hump of applying that functionality to my page "Template C" instance only. And per the attached examples, while researching how to solve this problem I see on the Pagelines site *itself* that the navigation elements are in place - and I especially like the oval button formatting of the sibling page navigation.
      So - really, my question is two-part:
      Are there plugins/code snippets/tutorials/threads here that show how Pagelines achieved their page hierarchy nagivation, and  Is there a tutorial (or advice from generous contributors here) on how to use the PHP templates to override the content portion of the page to add the navigation elements? Thanks in advance!


    • hungryitalian
      By hungryitalian
      What is the equivalent to DMS2's PostNav section in PL5?  I'm looking for PREVIOUS/NEXT buttons that show the associated post names for the previous and next posts.
      Thanks,
      J.D.
×