MENU COLORS ON HOVER

[kjcarleo]

Hello, how can I change the color and hover color for the menu items BAR and on hover color. Please see attached.

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, try by adding this to style.css of child theme 🙂

COPY CODE

ul#menu-megaprimarymenu li:hover {
    background: black;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[kjcarleo]

Can I completely remove the bar above the item menu?

Kevin

[Laura]

Hello, you can try with this code, at style.css 🙂

COPY CODE

.kleo-main-header .nav > li.active > a {
    box-shadow: none !important;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[kjcarleo]

OK thanks

[Laura]

Glad to help 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[kjcarleo]

Hey I decoded I want to use a red bar with the following exact color – #dd3333. What would the code look like?

[Laura]

Hello, this would do it

COPY CODE

.kleo-main-header .nav li a:hover {
    box-shadow: inset 0px 2px 0px 0px #dd3333 !important;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[kjcarleo]

Thanks so much it looks good.

I noticed that the bar is also visible on the menu sub items on hover. Now I am thinking about using that for hover. What do you think?

[kjcarleo]

I just noticed the bar is not visible on the MAIN page. How can I make this happen?

[kjcarleo]

DISREGARD MY LAST COMMENT. I just realized I cannot see it because the hover color is the same – DUH

[kjcarleo]

OK so I attached video for you to see. I like the way the menu looks on the MAIN page, EXCEPT for the “jumping” it is still doing (looks like one pixel). I would like it to have a smoother transition on hover, (no jump) with the BLUE (#0025db) BG on hover still with the RED Bar (#dd3333), but maybe no border or something? You will notice when I go to a page other than MAIN home page, the colors are different.

In addition it looks like there is a one 1px border in black around each submenu item on all other pages but MAIN home page.

By the way, what is the difference between “a:hover” and “li:hover”

Here is what I have in TOTAL in my Quick CSS as of right now:

COPY CODE

.header-color.social-header {
    background-color: #0025db;
}
.header-color .top-menu li > a, .header-color #top-social li a {
    font-family: "Raleway";
    color: white;
}
.header-color .top-menu li > a:hover, .header-color #top-social li a:hover {
     color:white;
}
#top-social li a {
    border-right: 1px solid transparent !important; }
.kleo-main-header .nav.navbar-nav li a {
    color: #fff !important;
    font-weight: 900 !important;
}
#gwolle_gb #gwolle_gb_new_entry .input {
	border: 0px solid #e5e5e5;
	background-color: transparent;
}
#gwolle_gb #gwolle_gb_new_entry input,
#gwolle_gb #gwolle_gb_new_entry textarea {
	background-color: #f2f2f2;
}
.avatar {
border-radius: 0 !important;
}

.top-menu li a {
    border: 0 !important;
}

li.kleo-user_avatar-nav a img {
    border-radius: 0;
    border:2px solid #ddd;
}

.bp-login-widget-user-avatar {
    border-radius: 0;
    border: 5px solid #ddd;
}

#buddypress .rounded, .buddypress .rounded {
    border-radius: 0 !important;
}

div#kleo-quick-contact {
    width: 400px;
}

h4.kleo-qc-title {
    font-weight: 800;
}
div#kleo-quick-contact p {
    font-weight: 400;
}
.kleo-main-header .nav > li.active > a {
    box-shadow: none !important;
}
h4.kleo-qc-title:before {
    content: 'e85f';
    font-family: fontello;
    padding: 10px;
}

h1.page-title {font-weight: bold;}

/*Envira Gallery Title for Albums */
.envira-gallery-wrap .envira-album-title {
font-size:18px;
}

.envira-gallery-description p {
    font-size: 18px;
}
.kleo-search-form #searchform .input-lg {
    border-radius: 0;
    margin: 0 !important;
    height: 45px !important;
}
.kleo-search-form #searchform .input-group-btn { top:10px !important;}

.envira-breadcrumbs a {
    color: blue;
    font-size: 18px;
}
.envira-breadcrumbs a:hover {
    color:blue;
    font-size: 18px;
}
.envira-breadcrumbs .breadcrumb_last {
    color: black;
    font-size: 18px;
}
ul#menu-megaprimarymenu .caret:after {
    color:white !important;
}
#footer .widget-title {
    text-decoration: underline;
    font-size: 16px;
    font-weight: 900;
}
.share-links div.hr-title {
    margin-bottom: 5px !important;
}
.share-links {
    text-align: center;
    padding: 10px;
    clear: both;
}
.dropdown-menu li a {
    background: #0025db;
    border: solid 0px #ffffff;
    color: #ffffff !important;
}
.breadcrumb-extra a {
    text-transform: uppercase;
}
ul.dropdown-menu li:hover {
    background: #0025DB !important;
    border: 0px solid #0025DB !important;
}
ul.dropdown-menu a:hover {
    color: #0025DB !important;
}
.header-color .dropdown-menu .active a {
    background: #dd3333;
}
.kleo-notifications.new-alert {
    background-color: #dd3333;
    color: #ffffff;
    position: absolute;
    top: 18px !important;
    right: -24px !important;
}
ul#menu-megaprimarymenu li a {
    text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 2px 2px #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000;
}
ul.dropdown-menu li a {
    text-shadow: none !important;
}
.kleo-search-form .kleo-ajax-search-loading {
    margin: 0 auto;
    top: 12px;
}
.kleo-toggle-submenu .submenu-inner {
     background:red;
}
.kleo-notifications-nav ul.submenu-inner li {
     background:green;
}
a.btn.btn-default.mark-as-read {
    background: red !important;
    color: green !important;
}
.kleo-toggle-submenu .minicart-buttons {
     background:yellow !important;
}
.kleo-main-header .nav li a:hover {
    box-shadow: inset 0px 2px 0px 0px #dd3333 !important;
}
.kleo-search-form #searchform .input-lg {
    box-shadow: 0px 12px 42px 12px rgba(0,0,0,0.08);
}

Attachments:

You must be logged in to view attached files.

[Kieran]

This is just a though regarding the jumping / solid black line behavior.

Can you create a new page for me, fill the page with some dummy content, and set the header to be transparent just like the home page. Publish the page and see if you get the jumping behaviour you spoke of on the homepage, I am guessing there will be no black border when you do this.

Let me know

Kieran.

[Kieran]

thought*

[kjcarleo]

I created the new page, but there still appears to be jumping:

http://c4f.a19.mwp.accessdomain.com/test-page/

[Kieran]

Could you put some content in the page for me please?

*Please excuse the reply to your other topic, I switched to the wrong tab

[kjcarleo]

Ok added some more. How much longer will you be around?

[Kieran]

Hi @kjcarleo

I have looked at the issue for you and found the following

– When your menu shows on a page without a transparent header it displays correctly.

– When your menu shows on a page that has a transparent header the transparency is continuing into the black border rendering it invisible

In my opinion this is an issue with using an alternative menu plugin, it would be worthwhile raising the issue with the plugin developer and seeking their insight on how to fix this.

I’m only around for the next hour or so.

Regards,

Kieran.

[kjcarleo]

I am not using an alternative menu plugin to my knowledge.

[Kieran]

That’s totally my fault I misread the megaprimarymenu (your menu name) as a mega main menu plugin class.

In that case it would be better to continue this ticket with @Laura as I can’t seem to find the issue for you. The 1px black border exists on your non-transparent header pages as that’s what you’ve told it to show in theme options, the border becomes transparent (disappears) when the page is set to a transparent header because that is the default behavior.

[kjcarleo]

Ok understodd. Thanks for helping out though.

Any input on this ticket? Concerning the “square”?

Another thing, how do I change the color of the black box (45 degrees square) to #dd3333?

https://archived.seventhqueen.com/forums/topic/live-notifications-bubble-customization

[Laura]

Glad to help 🙂
About the box, try

COPY CODE

.kleo-minicart {
    background: red !important;
    color: white;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[kjcarleo]

Still need your help. Kieran tried to help but couldn’t quite get it.

Please see my response as of OCTOBER 29, 2016 AT 06:14

Kevin

[kjcarleo]

OK so I attached video for you to see. I like the way the menu looks on the MAIN page, EXCEPT for the “jumping” it is still doing (looks like one pixel). I would like it to have a smoother transition on hover, (no jump) with the BLUE (#0025db) BG on hover still with the RED Bar (#dd3333), but maybe no border or something? You will notice when I go to a page other than MAIN home page, the colors are different.

In addition it looks like there is a one 1px border in black around each submenu item on all other pages but MAIN home page.

By the way, what is the difference between “a:hover” and “li:hover”

Here is what I have in TOTAL in my Quick CSS as of right now:

COPY CODE

.header-color.social-header {
    background-color: #0025db;
}
.header-color .top-menu li > a, .header-color #top-social li a {
    font-family: "Raleway";
    color: white;
}
.header-color .top-menu li > a:hover, .header-color #top-social li a:hover {
     color:white;
}
#top-social li a {
    border-right: 1px solid transparent !important; }
.kleo-main-header .nav.navbar-nav li a {
    color: #fff !important;
    font-weight: 900 !important;
}
#gwolle_gb #gwolle_gb_new_entry .input {
	border: 0px solid #e5e5e5;
	background-color: transparent;
}
#gwolle_gb #gwolle_gb_new_entry input,
#gwolle_gb #gwolle_gb_new_entry textarea {
	background-color: #f2f2f2;
}
.avatar {
border-radius: 0 !important;
}

.top-menu li a {
    border: 0 !important;
}

li.kleo-user_avatar-nav a img {
    border-radius: 0;
    border:2px solid #ddd;
}

.bp-login-widget-user-avatar {
    border-radius: 0;
    border: 5px solid #ddd;
}

#buddypress .rounded, .buddypress .rounded {
    border-radius: 0 !important;
}

div#kleo-quick-contact {
    width: 400px;
}

h4.kleo-qc-title {
    font-weight: 800;
}
div#kleo-quick-contact p {
    font-weight: 400;
}
.kleo-main-header .nav > li.active > a {
    box-shadow: none !important;
}
h4.kleo-qc-title:before {
    content: 'e85f';
    font-family: fontello;
    padding: 10px;
}

h1.page-title {font-weight: bold;}

/*Envira Gallery Title for Albums */
.envira-gallery-wrap .envira-album-title {
font-size:18px;
}

.envira-gallery-description p {
    font-size: 18px;
}

.kleo-search-form #searchform .input-lg {
    border-radius: 0;
    margin: 0 !important;
    height: 45px !important;
}

.kleo-search-form #searchform .input-group-btn { top:10px !important;}

.envira-breadcrumbs a {
    color: blue;
    font-size: 18px;
}
.envira-breadcrumbs a:hover {
    color:blue;
    font-size: 18px;
}
.envira-breadcrumbs .breadcrumb_last {
    color: #dd3333;
    font-size: 18px;
}
ul#menu-megaprimarymenu .caret:after {
    color:white !important;
}
#footer .widget-title {
    text-decoration: underline;
    font-size: 16px;
    font-weight: 900;
}
.share-links div.hr-title {
    margin-bottom: 5px !important;
}
.share-links {
    text-align: center;
    padding: 10px;
    clear: both;
}
.dropdown-menu li a {
    background: #0025db;
    border: solid 0px #ffffff;
    color: #ffffff !important;
}
.breadcrumb-extra a {
    text-transform: uppercase;
}
ul.dropdown-menu li:hover {
    background: #0025DB !important;
    border: 0px solid #0025DB !important;
}
ul.dropdown-menu a:hover {
    color: #0025DB !important;
}
.header-color .dropdown-menu .active a {
    background: #dd3333;
}
.kleo-notifications.new-alert {
    background-color: #dd3333;
    color: #ffffff;
    position: absolute;
    top: 18px !important;
    right: -24px !important;
    border-radius: 0 !important;
}
ul#menu-megaprimarymenu li a {
    text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 2px 2px #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000;
}
ul.dropdown-menu li a {
    text-shadow: none !important;
}
.kleo-search-form .kleo-ajax-search-loading {
    margin: 0 auto;
    top: 12px;
}

.kleo-toggle-submenu .submenu-inner {
     background:red;
}
.kleo-notifications-nav ul.submenu-inner li {
     background:#0025DB;
}
a.btn.btn-default.mark-as-read {
    background: red !important;
    color: green !important;
}
.kleo-toggle-submenu .minicart-buttons {
     background:yellow !important;
}
.kleo-main-header .nav li a:hover {
     box-shadow: inset 0px 2px 0px 0px #dd3333 !important;
}
.kleo-search-form #searchform .input-lg {
    box-shadow: 0px 12px 42px 12px rgba(0,0,0,0.08);
}
#header i:before {
    font-size: 16px;
}

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, well i would suggest to hire a developer for that as it requires more time and development and we can help you with small quick issues 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[kjcarleo]

Can’t I just add or remove a border? This is an issue with the menu I believe. Please help.

[kjcarleo]

Did you make any changes to the main page font or something? It looks different now. If you go to one of the pages from the main home page you will see the difference.

[kjcarleo]

The main home page menu is fine without the jumping if we can get rid of it, but can you at least help me make the menu the same on other pages. You can clearly see by visiting a couple pages the hover color is different for the other pages compared to home page.

[Laura]

Hello, you will need the help of a developer, i already spent a lot of time with custom requests and need to focus more on theme issues so do not have much more free time i hope you can understand 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[kjcarleo]

Laura,

I don’t understand. I need to know why the menu looks different on other pages, this is your template – why would I need a developer for that? Can’t you see that the submenu items on the MAIN home page look different on hover than they look on all the other pages? I am Ok with the way they look on the MAIN home page if you can share the coding to make it match on the other pages.

I attached some images for clarity.

Also, when you logged in, were any changes made to the header on the MAIN home page? The font looks different when I go to other pages besides HOME. It was not like this before.

Attachments:

You must be logged in to view attached files.

[Radu]

Your site has lot of custom stylings if you will remove the CSS from quick CSS area (backup it) and save theme options and empty all caches the menus will look the same in mentioned pages ?

R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[kjcarleo]

I can try that. Give me a few minutes. How much longer will you be around?

[kjcarleo]

OK I removed ALL the quick CSS. But you will notice that there are colors on hover on the pages other than MAIN home page. So basically, yet the menus are different. Please take a look and let me know what you think.

[kjcarleo]

I would like (need) to have it so both menus match. I would like to have the RED bar (#dd3333) at top on hover for menu and submenus, and BLUE (#0025db) for menu BG with white text. On hover, I would like the Blue BG to change to darker blue (#0021c6).

So on hover (mouseover) the submenu and menu items would be darker blue BG, white text with RED (#dd3333) bar at top.

The attachment shows what I am looking for. If possible I would like no border between menu items

Attachments:

You must be logged in to view attached files.

[Radu]

Hi,

In inner pages the current page it’s highlighted with red background so using this selector

COPY CODE

.header-color .dropdown-menu li.current_page_item a, .header-color .dropdown-menu li.current-menu-item a { background-color:blue !important; }

Change the blue with your desired color and those will be the same, using this the menus will match!

FYI: We cannot offer support for custom customization, you should do yourself such as adjustments like the nuance of color on hover, I’ve guided you, if you are a webmaster you should be able to customize the menu with provided CSS selectors and guidance.

I hope you understand.

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[kjcarleo]

This reply has been set as private.

[Radu]

Hi,

I see,

That thing with the “jumping menu items on hover” it’s caused by your quick CSS styles, I’ve tried to figure out but I cannot, it required much time to identify the cause, also that it’s not from our theme it’s from your custom CSS, pay attention to hover selectors and play with them.

I hope you understand my point of view

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Author]

Posts