Joomla Templates Club 406,261 posts

[cytropics Friend cytropicsJoin date: April 2014Posts: 44Downloads:38Uploads:20 Thanks: 5 Thanked: 1 times in 1 posts]

#204603

Website is in localhost

Please assist me in extending the menu in Ja Cagox template to include an extended menu on he right side of mainmenu. Kindly refer to screenshot attached.

I await.
Thanks.

---

Attachments:

1. 

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#563105

Hi @cytropics,

In this case, you can create another menu, add new module type “Menu” and place it in position “head-search”, then apply the same design as main menu for it instead.

Please note that at the moment, you can implement mega menu style for main menu only, so this extra menu on the right side might work with 1 level only.

[cytropics Friend cytropicsJoin date: April 2014Posts: 44Downloads:38Uploads:20 Thanks: 5 Thanked: 1 times in 1 posts]

#563321

thanks. How do I get the menu to align horizontal?

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#563341

Hi @cytropics,

Could you please provide your site url first ? I need to take a look at the menu in order to provide your appropriate CSS code.

[cytropics Friend cytropicsJoin date: April 2014Posts: 44Downloads:38Uploads:20 Thanks: 5 Thanked: 1 times in 1 posts]

#563466

Site in localhost. See attachment.

---

Attachments:

1. 

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#563516

Hi @cytropics,

Please open root_foldertemplatesja_cagoxcsscustom.css (if you don’t have this file, just create a new one) then add this code :

.head-right {
min-height: 0;
padding: 0;
}
.head-right .head-search {
margin: 0;
}
.head-search .nav li {
float: left;
padding: 0 15px;
}
.head-search .nav > li > a {
color: #222222;
font-family: "Montserrat",sans-serif;
font-size: 13px;
font-weight: 700;
padding-left: 0;
padding-right: 0;
text-transform: uppercase;
}
.head-search .nav > li > a:after {
border-bottom: 2px solid;
bottom: 0;
content: "";
height: 0;
left: 0;
position: absolute;
transition: width 0.2s ease 0s;
width: 0;
}
.head-search .nav > li > a:hover,
.head-search .nav > li > a:focus {
background: none;
}
.head-search .nav > li > a:hover:after,
.head-search .nav > li > a:focus:after {
width: 100%;
}

1 user says Thank You to Adam M for this useful post

1. cytropics

[cytropics Friend cytropicsJoin date: April 2014Posts: 44Downloads:38Uploads:20 Thanks: 5 Thanked: 1 times in 1 posts]

#563676

This is brilliant. Worked in one go. Thanks Adam M 😀

[Author]

Posts