kjcarleo

[kjcarleo]

Ok thanks

[kjcarleo]

Attached pic for reference. Also concerned about the button colors.

Attachments:

You must be logged in to view attached files.

[kjcarleo]

So sorry but when an item is added to the cart of have color issues again. Any coding for this?

[kjcarleo]

This reply has been set as private.

[kjcarleo]

Oh yeah, I see now. Thanks.

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

[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 can try that. Give me a few minutes. How much longer will you be around?

[kjcarleo]

It looks great. Thank you so much. Maybe you could help out Laura and I with an issue with my submenu colors?

It is tthis ticket: https://archived.seventhqueen.com/forums/topic/menu-colors-on-hover#post-134362

[kjcarleo]

Actually it is good to go. Thank you so much.

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

[kjcarleo]

I tried that and even after flushing the cache I do not see a change.

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

[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]

Great thanks

[kjcarleo]

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

[kjcarleo]

Attached. See at the bottom right

Attachments:

You must be logged in to view attached files.

[kjcarleo]

Actually, I just noticed it changed them for the SUBMENUS – Is it possible to keep the submenu icons the default size? It throws of the vertical alignment.

[kjcarleo]

But the “Shop”, “Hamburger Menu” and “Search” icons are to the right of it. There is no option to move them in the settings. Take a look at the menu and you will see.

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

[kjcarleo]

This reply has been set as private.

[kjcarleo]

How do I change the color of the black box (45 degrees square) to #dd3333?

Kevin

[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]

Actually, I just noticed it changed them for the SUBMENUS – Is it possible to keep the submenu icons the default size? It throws of the vertical alignment.

[kjcarleo]

Actually, I kist noticed it changed them for the SUBMENUS – Is it possible to keep the submenu icons the default size? It throws of the vertical alignment.

[kjcarleo]

That’s perfect! Thanks.

[kjcarleo]

But the “Shop”, “Hamburger Menu” and “Search” icons are to the right of it. There is no option to move them in the settings. Take a look at the menu and you will see.

[kjcarleo]

Yeah looks great – thanks.

[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

[kjcarleo]

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

[kjcarleo]

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

[kjcarleo]

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

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

[kjcarleo]

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

[kjcarleo]

Yeah I am using WP Rocket, maybe I didnt wait long enough.

Thanks so much on the consolidation – I can probably look at the rest myself.

How much longer are you around??? I am really trying to get resolution for the following ticket today:

https://archived.seventhqueen.com/forums/topic/menu-colors-on-hover

[kjcarleo]

Here is the attachment.

[attachment file=142038]

Attachments:

You must be logged in to view attached files.

[kjcarleo]

I need some help with the code for the mini cart hover menu. Please see attached, I did my best to show which colors I want where, but with out the respective code I am just chasing my tail.

I would Like the Button Blue, and as long as it keeps the red bar on hover it should be fine.

Kevin

[kjcarleo]

Actually it ONLY worked in quick CSS. I pasted the code exactly into the style.css but no change until I removed it from sytle.css and entered it to my Quick CSS.

Here is my chief concern, my quick CSS is getting quite a lot of code. Is there a limit? There is so much now, I am not sure how to condense it. Take a look:

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);
}
.kleo-notifications.new-alert {
    border-radius: 0 !important;
}

[kjcarleo]

Is there any benefit to adding it to Quick CSS instead? Whats the difference?

[kjcarleo]

How about making the bubble squared? Is that possible?

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

[Author]

Posts