Public Forums 71,145 posts

[joit Friend joitJoin date: December 2016Posts: 15Downloads:3Uploads:1 Thanks: 1]

#995516

Hi,

I got so far as in the attached screenshot. Now whatI still want to do for the submenu is

1. Change the text color
2. change the hover color
3. remove the horizontal rule / separator (they also appear in the off-canvas menu)

I played with this code to my custom theme’s less file but it just won’t work:

.t3-megamenu .mega-nav > li.active > a,
.t3-megamenu .dropdown-menu .mega-nav > li.active > a {
  color: #B41432;
  background: #eeeeee;
}

.t3-megamenu .mega-nav > li a,
.t3-megamenu .dropdown-menu .mega-nav > li a {
  padding: 10px;
  color: #B41432;
}

.t3-megamenu .mega-nav > li.open > a,
.t3-megamenu .dropdown-menu .mega-nav > li.open > a {
  background: #eeeeee;
}

.dropdown-menu {
background-color: #ffffff;
}

Any idea?

Thanks Hannes

---

Attachments:

1. 

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#995525

Hi
Kindly post your working site URL here .
Regards

[joit Friend joitJoin date: December 2016Posts: 15Downloads:3Uploads:1 Thanks: 1]

#995565

sure! there it is http://h2592742.stratoserver.net/websites/sipnix/

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#995567

Hi
Go to /css/custom.css file in the template folder, create it if its not present
Use the suggested code and change the color codes

Change the text color

.navbar-default .navbar-nav > li > a {
    color: #faced6!important; }

change the hover color

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {

    color: #ffffff!important;
}

remove the horizontal rule / separator (they also appear in the off-canvas menu)

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    -webkit-box-shadow: none!important;
    box-shadow: none!important;
}

Hope it helps .

[joit Friend joitJoin date: December 2016Posts: 15Downloads:3Uploads:1 Thanks: 1]

#995617

thanks for you help!
I put the custom.css file here

templates/purity_iii/css/themes/mytheme/css

but I didn’t see any difference. I also tried to turn off dev mode, didn’t help, too.
What could be missing?

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#995621

Hi
Kindly add it in /css folder of template .
/templates/purity_iii/css/custom.css file .

[joit Friend joitJoin date: December 2016Posts: 15Downloads:3Uploads:1 Thanks: 1]

#995626

I tried that, too
but it didn’t help with the submenu, it just changed the looks of the other menus

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#995637

Hi
Use this code for dropdown and change the color codes

.t3-megamenu .mega-nav > li.open > a, .t3-megamenu .dropdown-menu .mega-nav > li.open > a {
    background: #515151;
}

.t3-megamenu .mega-dropdown-menu {
    color: #f7f7f7;
       background: #515151;
}

[joit Friend joitJoin date: December 2016Posts: 15Downloads:3Uploads:1 Thanks: 1]

#995648

sorry, I still can’t see any difference

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#995665

Kindly check site again code is working for submenu : http://prntscr.com/dl7rko
beside it , it would be nice if you will post a screenshot , illustrate your request in screenshot , i can see what exactly on you want to achieve here

[joit Friend joitJoin date: December 2016Posts: 15Downloads:3Uploads:1 Thanks: 1]

#995694

yes, the bg color changed! But what about the textcolor and the separator?

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#995698

Replace all codes i provided with this code

.t3-megamenu .mega-nav > li.open > a, .t3-megamenu .dropdown-menu .mega-nav > li.open > a { background: #eeeeee; color: #000;}
 .t3-megamenu .mega-nav > li a, .t3-megamenu .dropdown-menu .mega-nav > li a { color: #B41432; }
.t3-megamenu .mega-dropdown-menu { color: #B41432;   background: #eeeeee;}
.t3-megamenu .mega-nav > li, .t3-megamenu .dropdown-menu .mega-nav > li {border-bottom:none; border-top:none;}
.t3-megamenu .mega-nav > li:first-child, .t3-megamenu .dropdown-menu .mega-nav > li:first-child { border-top: none;}

http://prntscr.com/dl81io

[joit Friend joitJoin date: December 2016Posts: 15Downloads:3Uploads:1 Thanks: 1]

#995718

Thanks you so much, it works really well!
Just one little thing, the separator also is in the offcanvas menu and I cannot hide it. Can you pleae tell me how to hide it?

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#995722

Hi
Use the code below

.dropdown-menu > li {   border-top: none!important;}

[joit Friend joitJoin date: December 2016Posts: 15Downloads:3Uploads:1 Thanks: 1]

#995737

Thanks so much!
Now I just have a last question. Fo far, I used the template.less file to do my css changes. Now all this is in custom.css.
When is it better to use custom .css than template.less?

[Author]

Posts