Unlimited Sidebar Styling

[franklozano]

I just discovered the UNLIMITED SIDEBAR last night. I set a side bar up and hoped that it would “style” like the MAIN menu which was created in the HEADER PRO and styled in the custom CSS. It does not follow that style

How can I style the unlimited sidebar(s)? The client would like the BLUE hover, and the ACTIVE or CURRENT page to have it’s text highlighted in GREEN.

Here is an example:
http://a84.5f1.myftpupload.com/jd-edwards/jde-services/jde-business-value-assessment/

Thanks!

Frank

[jade]

Hi Frank,

The styling of the Pro header navigation is specific to the header and does not apply to all the other menus sitewide.

To do that, please add this code in Pro > Theme Options > CSS:

.widget_nav_menu ul li a {
    color: rgb(28,36,92);
    font-weight: bold;
}

.widget_nav_menu ul li.current_page_item a,
.widget_nav_menu ul li a:hover {
   color: #4DB846;
}

Here are some related links for further reading:

• Intro to CSS - https://goo.gl/mFuWQT
• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa

Hope this helps.

[franklozano]

This is fantastic and just what I needed. The client wants to launch the site today!

In order to use these custom sidebar navigations, I split the page into 1/4 + 3/4 in the layout. I made various sidebars in UNLIMITED SIDEBARS, but those sidebars do not show up as an option when I have the page template layout set to LAYOUT, SIDEBAR LEFT, CONTENT RIGHT. Is there a better way to do this?

THANK YOU!!!

[friech]

Hi @franklozano,

The sidebar that is referred to LAYOUT - SIDEBAR LEFT, CONTENT RIGHT page template is only the Main Sidebar, you can’t select which sidebar would it be, unless you do a template customization.

It would be best if you choose a Blank - Container template layout and utilize a 1/4 + 3/4 column and the Widget Area element.

Thanks,

[franklozano]

Thank you.

So I dug into the code based on a previous reply and was able to get ride of the font awesome arrow AFTER and now I noticed something I can’t fix.

On this page at this level in the menu, PRODUCTS and everything BELOW IT are GREEN.
http://a84.5f1.myftpupload.com/jd-edwards/jde-products/

I just want the CURRENT PAGE green like this example.
http://a84.5f1.myftpupload.com/jd-edwards/jde-products/jde-upgrade-instance-utility-tool-kit/

I keep trying thing in CSS but am missing something.

Thanks again.

Frank

[jade]

Hey Frank,

Please update this code:

.widget_nav_menu ul li.current_page_item a,
.widget_nav_menu ul li a:hover {
   color: #4DB846;
}

to

.widget_nav_menu ul li.current_page_item > a,
.widget_nav_menu ul li a:hover {
   color: #4DB846;
}

Hope this helps.

[franklozano]

WOW…you and your crew are amazing. Of course it worked!

You saved me. I tried for hours and was missing ONE LITTLE CHARACTER.

THANK YOU.

Frank

[christian]

You’re welcome, Frank.