Forum Replies Created
-
Author
-
kjcarleoParticipant
I added the above code, but it is still not redirecting – please help.
Here is the code I added to the Quick CSS Section under wp-admin -> theme options -> general options
COPY CODE<script> jQuery(document).ready(function() { document.addEventListener( 'wpcf7submit', function( event ) { if ( '10326' == event.detail.contactFormId ) { window.location.href="https://embassymarine.org/join-us-next-steps/"; // do something productive } }, false ); }); </script>
kjcarleoParticipantOK 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.kjcarleoParticipantActually 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; }
kjcarleoParticipantOK 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.kjcarleoParticipantYes I do have all of this:
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; } #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;}
But wasn’t sure which one it might be.
-
AuthorPosts