Joomla Templates Club 406,261 posts

[zdmdesignz Friend zdmdesignzJoin date: October 2009Posts: 122Downloads:0Uploads:25 Thanks: 54 Thanked: 11 times in 1 posts]

#195056

Hello,

I am having the hardest time figuring out what controls two css instances for my website. I cannot figure it our in firebug, though I have tried for a very long time. I’m sure it’s something simple :((

1. The first is the “loading state” of the background color on the blue menu in position-5 on the following page: http://kl.zmdesignsbranding.com/index.php/services.

I’ve created a menu class suffix to style the menu a different color. I’ve successfully changed all the controlling css declarations except the one that makes a mysterious gray (#eee or #eeeeee) background block appear behind the clicked link while that link is loading. This shows up in Firefox most prevalently. If you can point me to the controlling css code for this instance, I can change the color to something more appropriate. I have tried editing the following but it does nothing…

.module_menu .nav li:active {
}

2. The second issue is regarding the current state of the main menu (top nav).

I have created a Maser Menu which contains links to every single article in my site. The main menu (top nav) is made completely of aliases linking to my maser menu. I did this because I wanted to keep the very clean url structure and avoid all of the category and article #’s from appearing. I also wanted to keep my breadcrumbs intuitive and accurate.

This has worked great, but the only problem I’m running into is that the current state of the main menu (top nav) doesn’t work anymore (it used to turn blue and have a blue down arrow when a menu item was selected). The Master Menu should ensure that this works because I have a complete menu structure, where every item I click on should register within a parent or child menu item, and the current/active state of that menu item should reflect in my main menu and sidemenus (position-5). For some reason this is not the case. I have searched and searched to no avail. Your help here would be tremendously appreciated.

Thank you in advance.

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#523844

1. http://kl.zmdesignsbranding.com/templates/ja_mero/css/custom.css

This is the code for the position-5 links.


.module_menu .nav > li > a { color: #828282 }


2. http://kl.zmdesignsbranding.com/templates/ja_mero/css/themes/light/template.css

This is the code for the active top menu

.ja-mainnav .navbar .nav > .active > a, .ja-mainnav .navbar .nav > .active > a:hover, .ja-mainnav .navbar .nav > .active > a:focus {
background-color: transparent;
color: #fff
font-family: 'open_sansregular';
text-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

can you please be specific with a screenshot what you want to change to, so I could provide you a good solution.

1 user says Thank You to chavan for this useful post

1. zdmdesignz

[zdmdesignz Friend zdmdesignzJoin date: October 2009Posts: 122Downloads:0Uploads:25 Thanks: 54 Thanked: 11 times in 1 posts]

#523851

Thank you for your reply. Unfortunately the controlling code you’ve listed in both instances does not accomplish what I’m trying to do.

1. The first is the “loading state” of the background color on the blue menu in position-5 on the following page: http://kl.zmdesignsbranding.com/index.php/services.

I need to find that grey background color, not the text color.

This is how it looks when I click a link on the menu. This only appears while the link is loading, and then disappears.

2. Below are two screenshots of the main menu behavior.

NOTE: The mainmenu parent item and the selected child menu item should both turn blue when that child menu item is selected (EX: Services > Supply Chain Services). As it stands right now, only the child menu item turns blue when on that page.

TO CLARIFY: The child menu item turns blue when on that page, but the parent does not. The gray arrow used to also turn blue.

How it is now (Services and the arrow should be blue):

How it should be (notice how J! Pages and the arrow are blue):

---

Attachments:

1. 
2. 
3. 

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#523856

1. Regarding the Grey in the links

Go to this File: /ja_mero/css/themes/light/bootstrap.css

Find the below code and Remove “background-color: #eee”

.nav > li > a:hover, .nav > li > a:focus { text-decoration: none; background-color: #eee }


2. Go to this file: /ja_mero/css/themes/light/template.css

Add this code

.alias-parent-active .dropdown-toggle {
color: #1BA1E2 !important;

}

1 user says Thank You to chavan for this useful post

1. zdmdesignz

[zdmdesignz Friend zdmdesignzJoin date: October 2009Posts: 122Downloads:0Uploads:25 Thanks: 54 Thanked: 11 times in 1 posts]

#523860

Excellent! Thank you so much!

Now how do I make the arrow turn blue?

Thanks.

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#523863

you are most welcome and

you need to do some photoshop work on this image. change the color and upload it in the same directory

/templates/ja_mero/images/arrow-right.png

Note: If you Find my Post useful please click on the Thanks Icon

1 user says Thank You to chavan for this useful post

1. zdmdesignz

[zdmdesignz Friend zdmdesignzJoin date: October 2009Posts: 122Downloads:0Uploads:25 Thanks: 54 Thanked: 11 times in 1 posts]

#523877

I’m not sure if you understood what I was asking. My apologies.

How do I make the blue down arrow next to the parent menu item be blue like the text when active? You can notice that the blue arrow is already there when hovering over the parent menu item, but it isn’t visible when active.

Thanks

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#523883

Add this code to this css: /ja_mero/css/themes/light/bootstrap.css

.alias-parent-active .dropdown-toggle .caret {

border-bottom-color:#1BA1E2 !important;
border-top-color:#1BA1E2 !important;

}

Note: If you Find my Post useful please click on the Thanks Icon

1 user says Thank You to chavan for this useful post

1. zdmdesignz

[zdmdesignz Friend zdmdesignzJoin date: October 2009Posts: 122Downloads:0Uploads:25 Thanks: 54 Thanked: 11 times in 1 posts]

#523927

Chavan, you are truly a CSS Hound!

Your extremely quick and responsive support has helped me tremendously.

Please receive these 4 Thanks 🙂

[zdmdesignz Friend zdmdesignzJoin date: October 2009Posts: 122Downloads:0Uploads:25 Thanks: 54 Thanked: 11 times in 1 posts]

#524178

Hello Chavan,

I have one more very important question regarding the solutions you’ve found in this thread regarding current menu item css status.

This time, it applies to both the mainmenu, and to the sidemenus (like the ones I have in position-5) in the below linked page.

I need the background colors, font colors and the caret colors to represent the current status (an example of how the results should look is… Learn More- Insights for Telecom (sidemenu) > Customer Segmentation).

Because I have a Master menu, all of the links are under the correct parents, and each sidemenu is simply a level of that same Master menu. This means that all links should represent the menu structure in how they appear in the current status.

The Master Menu Structure for the below page is this: Products > Insights for Telecom > Customer Segmentation (see breadcrumbs). This means that Insights for Telecom should be active in both menus.

The following two menu items are examples of what should display a current status as outlined above:

Mainmenu:
Products > Insights for Telecom

Sidemenu (Lear More-Products):
Insights for Telecom

Thanks in advance 🙂

http://keystonelogic.zmdesignsbranding.com/index.php/products/insights-for-telecom/customer-segmentation

---

Attachments:

1. 

[Author]

Posts