Forum Replies Created
-
Author
-
kjcarleo
ParticipantAttached pic for reference. Also concerned about the button colors.
Attachments:
You must be logged in to view attached files.kjcarleo
ParticipantSo sorry but when an item is added to the cart of have color issues again. Any coding for this?
kjcarleo
ParticipantOh yeah, I see now. Thanks.
kjcarleo
ParticipantI 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
ParticipantOK 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
ParticipantIt 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
ParticipantLaura,
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
ParticipantThe 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
ParticipantDid 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
ParticipantCan’t I just add or remove a border? This is an issue with the menu I believe. Please help.
kjcarleo
ParticipantAttached. See at the bottom right
Attachments:
You must be logged in to view attached files.kjcarleo
ParticipantActually, 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
ParticipantBut 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
ParticipantOK 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
ParticipantThis reply has been set as private.kjcarleo
ParticipantHow do I change the color of the black box (45 degrees square) to #dd3333?
Kevin
kjcarleo
ParticipantStill 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
ParticipantActually, 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
ParticipantActually, 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
ParticipantThat’s perfect! Thanks.
kjcarleo
ParticipantBut 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
ParticipantOk 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
ParticipantAnother thing, how do I change the color of the black box (45 degrees square) to #dd3333?
kjcarleo
ParticipantYeah 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
ParticipantHere is the attachment.
[attachment file=142038]
Attachments:
You must be logged in to view attached files.kjcarleo
ParticipantI 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
ParticipantActually 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
ParticipantOK 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. -
AuthorPosts