Public Forums 71,145 posts

[songgirl1965 Friend songgirl1965Join date: January 2010Posts: 22Downloads:11Uploads:0 Thanks: 4]

#199178

I’ve been scouring the forum for the last two days on how to accomplish this and have not had much luck. I’ve managed to get the background color changed to what I want but I can not get the mouseover or focus color to change. The site I’m working on is dev.swpl.org. If you view the site you can see that I have changed the menu to have a dark grey almost black background with white texts and icons.. this is perfect. What I want though is to be able to change the color of the currently active menu or the on mouse over when the user is moving through the menu to another color besides the light grey. I’ve been through the template.css, bootstrap.css and megamenu.css and I can not get these colors to change. Below is a custom.css I have loaded right now with what I believe should be the correct items to change those colors but it does not seem to be working. In addition is there a way to have the navigation block not span the entire width of the browser window? With the darker menu background I would like to have the menu only span the width of the blocks below it. One final question… when I changed the colors of the background and test something seems to have changed one menu item text to black. If you look at the menu on my site there should be one more item to the right of “Catalog”… the menu is there but the text is black making it impossible to see. I can’t figure out where that happened.


.navbar-default {
background-color: #383838
border-color: #e7e7e7
}

.navbar-default .navbar-text {
color: #ffffff
}

.navbar-default .navbar-brand {
color: #ffffff
}

.navbar-default .navbar-nav > li > a {
color: #ffffff
}

@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #ffffff
}

.navbar-default .navbar-link {
color: #ffffff
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #555555
background-color: #2594DB
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
background-color: #2594DB
color: #555555
}


[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#540289

With regard to the width of your nav bar, here is something you can try . . . .

Within your custom.css file, modify the following CSS rule as follows:


.navbar-default {
background: linear-gradient(to bottom, #7d7e7d 0%, #0e0e0e 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-color: #e7e7e7
margin-left: auto;
margin-right: auto;
width: 1140px;
}

With regard to your question about the active menu item and/or mouseover – are you referring to the menu item background color?

[songgirl1965 Friend songgirl1965Join date: January 2010Posts: 22Downloads:11Uploads:0 Thanks: 4]

#540291

I want the background color of the menu item currently active or the item the mouse is currently hovering over to be #2695DB. I also need the submenu background colors to be black as well… still working on figuring out where to make that change.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#540292

Try This . . .

Within your custom.css file, modify the following CSS rule as follows:


.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
background-color: #2695db
}


[songgirl1965 Friend songgirl1965Join date: January 2010Posts: 22Downloads:11Uploads:0 Thanks: 4]

#540294

Nope, that didn’t work. Still stays the same color grey for the active menu item as well as the menu item the mouse is currently over.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#540295

<em>@songgirl1965 434058 wrote:</em><blockquote>Nope, that didn’t work. Still stays the same color grey for the active menu item as well as the menu item the mouse is currently over.</blockquote>

It may be because you have currently have conflicting CSS rules within your custom.css file.

Make a BACK-UP copy of your current custom.css file, then clear it out and try starting over with the two CSS rules I suggested above.

[songgirl1965 Friend songgirl1965Join date: January 2010Posts: 22Downloads:11Uploads:0 Thanks: 4]

#540296

My custom css file has very little in it. Nothing conflicting as far as I can see… this is the entire file

@media screen and (min-width: 768px) {
.t3-module {
margin-bottom: 20px;
}
}
@media screen and (min-width: 768px) {
.t3-sl {
padding-bottom: 0px;
padding-top: 0px;
}
}

.t3-sl .row {
margin-right: auto;
margin-left: auto;
width: 115%;
}

.t3-mainbody {
padding-top: 0;
}

.t3-copyright {
padding-bottom: 0px;
padding-top: 0px;
}

.navbar-default {
background: #262626 /* Old browsers */
background: -moz-linear-gradient(top, #262626 76%, #40bffd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(76%,#262626), color-stop(100%,#40bffd)) /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #262626 76%,#40bffd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #262626 76%,#40bffd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #262626 76%,#40bffd 100%); /* IE10+ */
background: linear-gradient(to bottom, #262626 76%,#40bffd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#262626', endColorstr='#40bffd',GradientType=0 ); /* IE6-9 */
border-color: #383838
}

.navbar-default .navbar-text {
color: #ffffff
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
background-color: #2695db}


[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#540299

You’re missing a semi-colon after the color code in the following CSS rule:


.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
background-color: #2695db;
}


and it MAY be in conflict with the .navbadr-default CSS rule you have above it.

[songgirl1965 Friend songgirl1965Join date: January 2010Posts: 22Downloads:11Uploads:0 Thanks: 4]

#540301

I seem to be getting closer and really appreciate your help. I seem to have been able to get the color right for the active menu item but it only seems to work when you on the home menu item. If you load the page it loads correctly with a black-green gradiant on the “Home” menu item. When I leave home and go to “About SPL -> “Word from the…” the home menu returns to the black to blue gradiant but the “About SPL” does not turn to the black to green as I would have expected. I’m still working on it… any thoughts on why the “About SPL” menu item did not change when it was the active menu item?

current custom css file below

@media screen and (min-width: 768px) {
.t3-module {
margin-bottom: 20px;
}
}
@media screen and (min-width: 768px) {
.t3-sl {
padding-bottom: 0px;
padding-top: 0px;
}
}

.t3-sl .row {
margin-right: auto;
margin-left: auto;
width: 115%;
}

.t3-mainbody {
padding-top: 0;
}

.t3-copyright {
padding-bottom: 0px;
padding-top: 0px;
}

.navbar-default {
background: #262626; /* Old browsers */
background: -moz-linear-gradient(top, #262626 76%, #40bffd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(76%,#262626), color-stop(100%,#40bffd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #262626 76%,#40bffd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #262626 76%,#40bffd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #262626 76%,#40bffd 100%); /* IE10+ */
background: linear-gradient(to bottom, #262626 76%,#40bffd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#262626', endColorstr='#40bffd',GradientType=0 ); /* IE6-9 */
border-color: #383838;
}

.navbar-default .navbar-text {
color: #ffffff;
}

.navbar-default .navbar-nav > li > a {
color: #ffffff;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #ffffff;
background-color: transparent;
}

@media (min-width: 768px) {
.nav > li > .separator {
color: #ffffff;
}
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #ffffff;
background: #262626; /* Old browsers */
background: -moz-linear-gradient(top, #262626 76%, #b0cd61 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(76%,#262626), color-stop(100%,#b0cd61)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #262626 76%,#b0cd61 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #262626 76%,#b0cd61 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #262626 76%,#b0cd61 100%); /* IE10+ */
background: linear-gradient(to bottom, #262626 76%,#b0cd61 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#262626', endColorstr='#b0cd61',GradientType=0 ); /* IE6-9 */
}

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#540304

I see you have the following CSS within your custom.css file . . . .

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
background: linear-gradient(to bottom, #262626 76%, #b0cd61 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
color: #ffffff
}

I assume that is the active/mouseover background effect you are wanting – yes?

The CSS rule that seems to be controlling the mouseover effect for the other menu items is within file path –> /templates/t3_bs3_blank/local/css/themes/swpl/template.css
at line 950:


.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
background-color: #e7e7e7
color: #555555
}

So perhaps modifying the rule above, as well, may result int he desired effect you’re wanting.

[songgirl1965 Friend songgirl1965Join date: January 2010Posts: 22Downloads:11Uploads:0 Thanks: 4]

#540307

Getting closer… added this to my custom.css

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
background: #262626 /* Old browsers */
background: -moz-linear-gradient(top, #262626 76%, #b0cd61 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(76%,#262626), color-stop(100%,#b0cd61)) /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #262626 76%,#b0cd61 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #262626 76%,#b0cd61 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #262626 76%,#b0cd61 100%); /* IE10+ */
background: linear-gradient(to bottom, #262626 76%,#b0cd61 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#262626', endColorstr='#b0cd61',GradientType=0 ); /* IE6-9 */
color: #ffffff
}


Still trying to get the active menu item to change to the black-green gradient. Whenever I leave the home menu item the to say the “About SPL” -> Word from… all menu items revert back to the standard blue -> black color. Still can not get the menu to only span the width of the block beneath it… it still wants to span the entire page. Getting much closer.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#540309

If I’m understanding you correctly, you’re referring to the submenu item that appears when hovering over “About SPL” – correct?

If so, then the CSS rule governing the hover background for that element is as follows:


.t3-megamenu .mega-nav > li a:hover, .t3-megamenu .dropdown-menu .mega-nav > li a:hover, .t3-megamenu .mega-nav > li a:focus, .t3-megamenu .dropdown-menu .mega-nav > li a:focus {
background-color: #f5f5f5
color: #262626
text-decoration: none;
}

Try pasting/modifying this rule within your custom.css file – as you’ve been doing with the other rules.

[songgirl1965 Friend songgirl1965Join date: January 2010Posts: 22Downloads:11Uploads:0 Thanks: 4]

#540310

No, not exactly what I’m looking for. I’ve seen what I’m looking for before on other joomlart mega menus. When I select any submenu items under a parent menu this should cause the parent menu item to become the active menu item. I want the active menu item to use the green-black color scheme… same as the now working open/mouse over. This seems to be working but only when on the home page.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#540312

If it’s okay with you, I’m going to reach out to my Support Team colleagues for some additional eyes/thoughts/suggestions.

🙂

[songgirl1965 Friend songgirl1965Join date: January 2010Posts: 22Downloads:11Uploads:0 Thanks: 4]

#540314

I’ve narrowed down the issue but not came up with a solution yet… the “About SPL” menu item is a seprator and as such is handled by a different set of CSS rules. I’ve tried adding the following up it is not working… I’m sure I’m doing something wrong in the CSS… just not sure what yet… very close though.

.nav > li > .separator > .active > a,
.nav > li > .separator > .active > a:hover,
.nav > li > .separator > .active > a:focus {
background: #262626 /* Old browsers */
background: -moz-linear-gradient(top, #262626 76%, #b0cd61 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(76%,#262626), color-stop(100%,#b0cd61)) /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #262626 76%,#b0cd61 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #262626 76%,#b0cd61 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #262626 76%,#b0cd61 100%); /* IE10+ */
background: linear-gradient(to bottom, #262626 76%,#b0cd61 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#262626', endColorstr='#b0cd61',GradientType=0 ); /* IE6-9 */
}

[Author]

Posts