multicolor secondary menu

This topic has 12 replies, 2 voices, and was last updated 10 years, 10 months ago by Sakin.

Viewing 13 posts - 1 through 13 (of 13 total)

Author

Posts
October 8, 2015 at 3:38 am #68084

david
Member

Loving your catch responsive pro theme. Is it possible to have a secondary multi color menu only under project pages? Currently moving this site to catch responsive pro site. Thanks for any input you have.

October 8, 2015 at 11:08 pm #68119

Sakin
Keymaster

@david: Yes, you can hide that in other pages. For, that first you need to use Catch Responsive Pro theme and then let me know it. After that I will send you custom css.

October 9, 2015 at 10:56 pm #68187

david
Member

Thanks so much, here is the link Eventhough the look has changed I’m so glad I purchased your theme, it has been fun to work with. Appreciate your help.

October 9, 2015 at 11:19 pm #68190

Sakin
Keymaster

@david: Thanks for your appreciation. I don’t see project page in this website and also there is no secondary menu.

October 9, 2015 at 11:28 pm #68192

david
Member

Ok, the secondary menu has been recreated. It should be hidden from homepage, our firm, services, portfolio, news, on the boards, and contact. Visible only from the five pages. Thx.

October 9, 2015 at 11:33 pm #68193
Sakin
Keymaster
@david: Just add the following css in “Appearance => Customize => Theme Options => Custom CSS Option box:
```
.nav-secondary { 
    display: none;
}
.page-id-13 .nav-secondary,
.parent-pageid-13 .nav-secondary { 
    display: block;
}
```
October 9, 2015 at 11:52 pm #68198

david
Member

GREAT! Now, on to the multicolor part?

October 9, 2015 at 11:56 pm #68201

Sakin
Keymaster

@david: Sorry I don’t get it which multicolor and where you want to add it.

October 10, 2015 at 12:02 am #68203

david
Member

no worries, appreciating your help. like original site, adding orange to commercial tab, red to single family, yellow to multifamily, green to tenant impr., and the blueish to other to the secondary menu.

October 10, 2015 at 8:48 pm #68233
Sakin
Keymaster
@david: try the following css:
```
.nav-secondary .catchresponsive-nav-menu a { color: #fff; }
.menu-item-219 a { background-color: #eb9103; }
.menu-item-218 a { background-color: #c26665; }
.menu-item-216 a { background-color: #d7af30; }
.menu-item-215 a { background-color: #9bb959; }
.menu-item-217 a { background-color: #7591c4; }
```
October 13, 2015 at 10:53 pm #68715

david
Member

thank you sakin, that worked great. i ended up taking out the first line of code because when the menu was active it looked hidden because of font color and background. thanks so much for all of your help!

October 30, 2015 at 10:28 pm #78824

david
Member

Coming back to the secondary menu, is it possible to make it a lot thinner say 20px high and where it auto sizes to fit whole width which currently is 906px? It would be awesome to autofit (fill) because when looking at it on a phone it puts it into multi rows that don’t look right. OR, maybe change the menu for smaller screens (mobile devices) like the kathmandu theme of yours then I can get away with the secondary menu not looking square. Thanks!!

October 31, 2015 at 10:31 am #78861
Sakin
Keymaster
@david:
1. If you want to change the line height of the secondary menu, then you can add the following css:
.nav-secondary .catchresponsive-nav-menu a { line-height: 31px; }

2. Float menu item cannot be perfect as it depends on your text in menu. So, try the following css:
```
.nav-secondary .wrapper { padding: 0; }
.nav-secondary { background-color: #5b3aa5; }
@media screen and (min-width: 1101px) {
    .nav-secondary .catchresponsive-nav-menu a { padding: 0 20px; }
    .nav-secondary .catchresponsive-nav-menu li:last-child a {
        padding: 0 21px 0 22px;
    }
}
```
Author

Posts