Joomla Templates Club 406,261 posts

[rahularch@hotmail.com Friend rahularch@hotmail.comJoin date: April 2016Posts: 12Downloads:15Uploads:1]

#1065189

I am trying to customize the top main menu and its drop-down menu (http://bvinst.org/), so it gives contrast similar to this (http://ja-university.demo.joomlart.com). Currently it is not readable on some devices. I want to increase the contrast by making the text bold on hover, and brighter even when non-hover.

I am unable to find the right css files to customize. Appreciate if someone can provide the css file(s) and line number that I need to edit. Thank you.

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

#1065376

Hi
If you want to apply other template style code on your site, you can use firebug or inspect element to check the style code and apply it on your site style classes using custom.css file.
For example, add this code in custom.css and change the style code as per needs.

.uber-header.header-6 .navbar-default .navbar-nav > li > a {
    text-transform: none;
    font-weight: 700;
    color: #505656;}

Regards

[rahularch@hotmail.com Friend rahularch@hotmail.comJoin date: April 2016Posts: 12Downloads:15Uploads:1]

#1065444

Thank you for the tips. I see there are many css files under Uber Template and I could not locate where is custom.css. I found these instead. Am I looking in the wrong place? kindly help:
"/css/megamenu.css"
"/css/layouts/university.css"
"/acm/header/css/style.css"
"/acm/menu/css/style.css"

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

#1065446

Hi
You have to create custom.css file in the css folder and add the style code in this file to override to define new css code.

Regards

[rahularch@hotmail.com Friend rahularch@hotmail.comJoin date: April 2016Posts: 12Downloads:15Uploads:1]

#1065648

Thank you, really appreciate your help. I was able to edit the header menu to my liking… almost.
When I hover over the main menu drop-downs, I made the text go yellow, per my liking. But without hovering the text is dark-gray, and I am not able to make it light-gray (so it reads better against the dark background). Kindly advice what css file to edit, what codes to add. Thanks.

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

#1065652

Hi
use this code in custom.css file

.nav .dropdown-menu li > a {
    color: #3d4045;
}

Change color code as per needs.

Regards

[rahularch@hotmail.com Friend rahularch@hotmail.comJoin date: April 2016Posts: 12Downloads:15Uploads:1]

#1065676

Excellent. Thank you. While we are at it, let me ask another thing. On this drop-down menu I see a yellow dot followed by > and then the text. How can I get rid of the dots? Thanks.

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

#1065700

Hi
Add this code in custom.css file to remove dot

.t3-megamenu .t3-module ul li, .t3-megamenu .t3-module .nav li {
    list-style: none;}

Regards

[Author]

Posts