[david]

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.

[Sakin]

@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.

[david]

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.

[Sakin]

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

[david]

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.

[Sakin]

@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;
}

[david]

GREAT! Now, on to the multicolor part?

[Sakin]

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

[david]

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.

[Sakin]

@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; }

[david]

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!

[david]

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!!

[Sakin]

@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