How can I put the image above my social icons beneath them? I would like the "USA A Study Destination" image underneath the social icons. Here is my Footer Code:
OK. Thank you. What I cannot that it to do now is have the image move down so it is not crashing into the social media icons.
Then it disappears when viewed on a tablet.
And it is not showing on mobile mode either and before the change in code I had the social icons under the copyright, but now everything is mashed toger.
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
Thank you. That solved the css for the mobile. However, the logo is no longer under the social media icons. Is it possible to put it under there vs. in the middle?
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
The footer issue had seemed to be resolved. Now it is back. The icons are now no longer above the logo as they had been. I did not change any code but had tweaked it but it was working. Here is the code for the footer:
OK. Thank you for the quick reply. The whole thing appears to be a mess now. The hover effect on the "Email StudyPA" link is no longer working. I am actually going to back-track and rework this. I will send follow-ups as needed. Thank you.
/* Header */ #header-outer.transparent:not([data-lhe="animated_underline"]) header#top nav > ul > li > a:hover { color: #f8d708 !important; }
body #header-outer[data-transparent-header="true"].transparent { background-color: rgba(255, 255, 255, 0.5) !important; }
html body div#header-outer[data-transparent-header="true"] { background-color: rgba(0, 0, 0, .8)!important; }
#header-outer.transparent[data-lhe="default"] #top nav > ul > li > a:hover, #header-outer.transparent[data-lhe="default"] #top nav .sf-menu > .sfHover:not(#social-in-menu) > a, #header-outer.transparent[data-lhe="default"] #top nav .sf-menu > .current_page_ancestor > a, #header-outer.transparent #top nav .sf-menu > .current-menu-item > a, #header-outer.transparent[data-lhe="default"] #top nav .sf-menu > .current-menu-ancestor > a, #header-outer.transparent[data-lhe="default"] #top nav .sf-menu > .current-menu-item > a, #header-outer.transparent[data-lhe="default"] #top nav .sf-menu > .current_page_item > a, #header-outer.transparent #top nav > ul > li > a:hover > .sf-sub-indicator > i, #header-outer.transparent #top .sf-menu > .sfHover > a .sf-sub-indicator i, #header-outer.transparent #top nav > ul > .sfHover > a > span > i, #header-outer.transparent #top nav ul #search-btn a:hover span, #header-outer.transparent #top nav ul #nectar-user-account a:hover span, #header-outer.transparent #top nav ul .slide-out-widget-area-toggle a:hover span, #header-outer.transparent #top nav .sf-menu > .current-menu-item > a i, body #header-outer.transparent[data-lhe="default"] #top nav .sf-menu > .current_page_item > a .sf-sub-indicator i, #header-outer.transparent #top nav .sf-menu > .current-menu-ancestor > a i, body #header-outer.transparent[data-lhe="default"] #top nav .sf-menu > .current-menu-ancestor > a i, #header-outer.transparent .cart-outer:hover .icon-salient-cart, .ascend #boxed #header-outer.transparent .cart-outer:hover .cart-menu .cart-icon-wrap .icon-salient-cart, #header-outer.transparent[data-permanent-transparent="false"]:not(.dark-slide) #top .span_9 > a[class*="mobile-"] > *, #header-outer.transparent[data-permanent-transparent="false"]:not(.dark-slide) #top #mobile-cart-link i, #header-outer[data-permanent-transparent="1"].transparent:not(.dark-slide) #top .span_9 > a[class*="mobile-"] > *, #header-outer[data-permanent-transparent="1"].transparent:not(.dark-slide) #top #mobile-cart-link i { color: #f8d708 !important; }
/* Dropdown Menu */ #header-outer:not([data-format="left-header"]) #top nav >ul >li:not(.megamenu) ul a:link { background-color: unset !important; }
html body div#header-outer[data-transparent-header="true"] #top nav >ul >li:not(.megamenu) ul { background-color: rgba(0, 0, 0, .8)!important; }
body #header-outer[data-transparent-header="true"].transparent #top nav >ul >li:not(.megamenu) ul { background-color: rgba(255, 255, 255, 0.5) !important; }
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (max-width: 768px) {
#footer-outer div#media_image-8 {
top: 26px !important;
right: -20px !important;
}
}
Thank you. I am getting closer. But I wish to make the mobile footer height taller so that the "USA A Study Destination" is under the social media icons. Now they are next to each other and I cannot make the footer height change to accommodate this.
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
Thank you again for all this help. Now I cannot get the social media icons above the logo just on the tablet format. Any changes I make to that CSS for a tablet affects the iPhone responsive layout.
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
How can I put the image above my social icons beneath them? I would like the "USA A Study Destination" image underneath the social icons. Here is my Footer Code:
/* Footer */
#footer-outer #copyright {
margin-top: 0px !important;
margin-bottom: 10px !important;
}
#footer-outer .col.span_5 {
text-align: left !important;
font-size: 14px !important;
margin-top: -50px !important;
padding-bottom: 15px !important;
width: 45% !important;
}
#footer-outer .col.span_7 {
width: 52% !important;
float: right;
padding-bottom: 15px !important;
margin-top: -40px !important;
}
#footer-outer #copyright a:hover:not(.nectar-button) {
color: #f8d708 !important;
font-weight: bolder !important;
}
#footer-outer .widget {
margin-top: 15px !important;
margin-bottom: -10px !important;
}
div#media_image-4 img {
display: table !important;
float: right !important;
margin-top: 5px !important;
margin-bottom: 50px !important;
}
#footer-outer .row {
padding: 0px !important;
}
#footer-outer a:hover i {
color: #29348e !important;
}
#footer-outer #copyright li a i {
Font-size: 28px !important;
padding: 10px!important;
}
Hi There,
Please send your admin login credentials so that we can look into the issue further.
Thanks.
Hi Marshall,
I have added the css below:
#footer-outer #copyright li a i {Font-size: 28px !important;
padding: 10px!important;
top: -36px;
left: -21px;
} #footer-outer #copyright p {
line-height: 136px;
margin-top: 0px;
} #footer-outer, #footer-outer a:not(.nectar-button) {
color: #444444!important;
height: 123px;
}
Please let us know if there are any further adjustments you would want us to make.
Thanks.
OK. Thank you. What I cannot that it to do now is have the image move down so it is not crashing into the social media icons.
Then it disappears when viewed on a tablet.
And it is not showing on mobile mode either and before the change in code I had the social icons under the copyright, but now everything is mashed toger.
Hey Again,
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (max-width: 768px) { #footer-outer .widget { margin-bottom: 0px !important; } #footer-widgets .container .col { margin-bottom: 0px !important; } #footer-outer { height: auto !important; } #footer-outer .col.span_5 { margin-top: 0px !important; } }Thanks
ThemeNectar Support Team
Thank you. That solved the css for the mobile. However, the logo is no longer under the social media icons. Is it possible to put it under there vs. in the middle?
Thank you!
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (max-width: 999px) { div#media_image-8 { position: absolute; right: 0px; top: 50px; } #footer-outer .col.span_7 { margin-top: -60px !important; } } @media only screen and (min-width: 1000px) { div#media_image-8 { position: absolute; right: 0px; top: 50px; } }Thanks
ThemeNectar Support Team
THANK YOU! That worked. I really appreciate it.
The footer issue had seemed to be resolved. Now it is back. The icons are now no longer above the logo as they had been. I did not change any code but had tweaked it but it was working. Here is the code for the footer:
/* Footer */
#footer-outer #copyright {
margin-top: 0px !important;
margin-bottom: 10px !important;
}
#footer-outer .col.span_5 {
text-align: left !important;
font-size: 14px !important;
margin-top: -50px !important;
padding-bottom: 15px !important;
width: 45% !important;
}
#footer-outer .col.span_7 {
width: 52% !important;
float: right;
padding-bottom: 15px !important;
margin-top: -40px !important;
}
#footer-outer #copyright a:hover:not(.nectar-button) {
color: #f8d708 !important;
font-weight: bolder !important;
}
#footer-outer .widget {
margin-top: 15px !important;
margin-bottom: -10px !important;
}
#footer-outer .row {
padding: 0px !important;
}
#footer-outer a:hover i {
color: #29348e !important;
}
#footer-outer #copyright p {
line-height: 126px;
margin-top: 0px;
}
#footer-outer #copyright li a i {
Font-size: 28px !important;
padding: 10px!important;
top: -16px;
left: -21px;
}
#footer-outer, #footer-outer a:not(.nectar-button) {
color: #444444!important;
height: 126px;
}
The tablet code has seemed to stop functioning properly too
@media only screen and (max-width: 999px) {
div#media_image-8 {
position: absolute;
right: 0px;
top: 50px;
}
#footer-outer .col.span_7 {
margin-top: -60px !important;
}
}
@media only screen and (min-width: 1000px) {
div#media_image-8 {
position: absolute;
right: 0px;
top: 50px;
}
}
Please turn off the caching plugins so we can check:
Thanks
ThemeNectar Support Team
I have deactivated WPRocket.
Hey Again,
The Custom CSS had a couple of Extra Ending braces which were causing an issue, have corrected it and updated the page.
Also Try adding the css to the Custom CSS in the Theme Options Panel so it throws an error if you make a mistake.
https://www.studypa.org/wp-admin/customize.php?return=%2Fwp-admin%2Fadmin.php%3Fpage%3DSalientChildTheme%26tab%3D1
Thanks
ThemeNectar Support Team
OK. Thank you for the quick reply. The whole thing appears to be a mess now. The hover effect on the "Email StudyPA" link is no longer working. I am actually going to back-track and rework this. I will send follow-ups as needed. Thank you.
Actually. I did move some of the CSS to the Chil-Theme CSS as suggested. Now, none of that CSS is active.
/* Headings/Paragraph */
body h1 {
color: #29348e !important;
padding-bottom: 10px !important;
}
h4 {
color: #29348e !important;
}
body h5 {
color: #29348e !important;
}
body a:hover {
color: #f8d708 !important;
}
/* Header */
#header-outer.transparent:not([data-lhe="animated_underline"]) header#top nav > ul > li > a:hover {
color: #f8d708 !important;
}
body #header-outer[data-transparent-header="true"].transparent {
background-color: rgba(255, 255, 255, 0.5) !important;
}
html body div#header-outer[data-transparent-header="true"] {
background-color: rgba(0, 0, 0, .8)!important;
}
#header-outer.transparent[data-lhe="default"] #top nav > ul > li > a:hover, #header-outer.transparent[data-lhe="default"] #top nav .sf-menu > .sfHover:not(#social-in-menu) > a, #header-outer.transparent[data-lhe="default"] #top nav .sf-menu > .current_page_ancestor > a, #header-outer.transparent #top nav .sf-menu > .current-menu-item > a, #header-outer.transparent[data-lhe="default"] #top nav .sf-menu > .current-menu-ancestor > a, #header-outer.transparent[data-lhe="default"] #top nav .sf-menu > .current-menu-item > a, #header-outer.transparent[data-lhe="default"] #top nav .sf-menu > .current_page_item > a, #header-outer.transparent #top nav > ul > li > a:hover > .sf-sub-indicator > i, #header-outer.transparent #top .sf-menu > .sfHover > a .sf-sub-indicator i, #header-outer.transparent #top nav > ul > .sfHover > a > span > i, #header-outer.transparent #top nav ul #search-btn a:hover span, #header-outer.transparent #top nav ul #nectar-user-account a:hover span, #header-outer.transparent #top nav ul .slide-out-widget-area-toggle a:hover span, #header-outer.transparent #top nav .sf-menu > .current-menu-item > a i, body #header-outer.transparent[data-lhe="default"] #top nav .sf-menu > .current_page_item > a .sf-sub-indicator i, #header-outer.transparent #top nav .sf-menu > .current-menu-ancestor > a i, body #header-outer.transparent[data-lhe="default"] #top nav .sf-menu > .current-menu-ancestor > a i, #header-outer.transparent .cart-outer:hover .icon-salient-cart, .ascend #boxed #header-outer.transparent .cart-outer:hover .cart-menu .cart-icon-wrap .icon-salient-cart, #header-outer.transparent[data-permanent-transparent="false"]:not(.dark-slide) #top .span_9 > a[class*="mobile-"] > *, #header-outer.transparent[data-permanent-transparent="false"]:not(.dark-slide) #top #mobile-cart-link i, #header-outer[data-permanent-transparent="1"].transparent:not(.dark-slide) #top .span_9 > a[class*="mobile-"] > *, #header-outer[data-permanent-transparent="1"].transparent:not(.dark-slide) #top #mobile-cart-link i {
color: #f8d708 !important;
}
/* Dropdown Menu */
#header-outer:not([data-format="left-header"]) #top nav >ul >li:not(.megamenu) ul a:link {
background-color: unset !important;
}
html body div#header-outer[data-transparent-header="true"] #top nav >ul >li:not(.megamenu) ul {
background-color: rgba(0, 0, 0, .8)!important;
}
body #header-outer[data-transparent-header="true"].transparent #top nav >ul >li:not(.megamenu) ul {
background-color: rgba(255, 255, 255, 0.5) !important;
}
/* page sliders */
body #ajax-content-wrap .nectar-slider-wrap div.swiper-slide.page-sliders .content h2 {
text-shadow: -5px 5px 4px rgba(0,0,0,0.3)!important;
-webkit-text-shadow: -5px 5px 4px rgba(0,0,0,0.3)!important;
margin-top: 100px !important;
margin-right: 200px !important;
}
body #ajax-content-wrap .nectar-slider-wrap div.swiper-slide.page-sliders .content p {
text-shadow: 0px 1px 2px rgba(0,0,0,0.5);
-webkit-text-shadow: 0px 1px 2px rgba(0,0,0,0.5);
font-size: 30px!important;
}
/* Slider Button */
body #ajax-content-wrap .nectar-slider-wrap .swiper-slide.page-sliders .button a {
font-size: 18px!important;
margin-top: -20px!important;
padding-top: 13px!important;
padding-bottom: 13px!important;
padding-right: 13px !important;
padding-left: 13px !important;
font-weight: bold !important;
border-color: #ffffff !important;
background-color: rgba(124, 124, 127, 0.4) !important;
}
body #ajax-content-wrap .nectar-slider-wrap .swiper-slide.page-sliders .button a:hover {
color: #f8d708 !important;
border-color: #29348e !important;
background-color: rgba(124, 124, 127, 0.8) !important;
}
/* Buttons */
.nectar-button span .nectar-button.see-through-2:hover, body .col.dark .nectar-button.see-through-2:hover, body .nectar-button.see-through-3:hover, body .col.dark .nectar-button.see-through-3:hover {
border-color: #29348e !important;
background-color: rgba(124, 124, 127, 0.2) !important;
color: #29348e !important;
}
.nectar-button {
color: #000!important;
border-color: #000 !important;
background-color: rgba(124, 124, 127, 0) !important;
font-size: 16px!important;
padding-top: 13px!important;
padding-bottom: 13px!important;
padding-right: 13px !important;
padding-left: 13px !important;
font-weight: 500 !important;
margin-top: 30px !important;
}
.housing-button {
margin-top: 0!important;
}
/*Pop-up Button */
.popup-button-close span .popup-button-close:hover, body .col.dark .popup-button-close:hover, body .popup-button-close:hover, body .popup-button-close:hover {
border-color: #29348e !important;
background-color: rgba(124, 124, 127, 0.2) !important;
color: #29348e !important;
}
.popup-button-close {
float: right;
letter-spacing: 1.5px;
text-transform: uppercase !important;
font-family: montserrat !important;
color: #444444!important;
border: 2px solid #444444 !important;
background-color: rgba(124, 124, 127, 0) !important;
font-size: 14px!important;
padding-top: 13px!important;
padding-bottom: 13px!important;
padding-right: 13px !important;
padding-left: 13px !important;
font-weight: 700 !important;
margin-top: 30px !important;
}
/* School Columns */
.column-schools {
margin-top: 0px !important;
margin-bottom: 30px !important;
border-bottom: 1px solid #29348e;
}
.column-schools img {
width: 90% !important;
}
.column-schools h6:hover {
color: #f8d708 !important;
color: #f8d708 !important;
}
.column-schools h6 {
text-align: center !important;
width: 90% !important;
line-height: 26px !important;
color: #29348e !important;
}
/* popup */
.pop-text p {
font-size: 16px !important;
line-height: 2 !important;
margin-bottom: -20px !important;
}
.pop-text ul {
padding-left: 10px !important;
line-height: 1.5 !important;
margin-bottom: 10px !important;
}
I temporarily put the CSS back in "Customize" area because I need the that code to be working
Ok, so can we mark this ticket as closed?.
Thanks
ThemeNectar Support Team
I am almost there and I appreciate your patience.
The tablet and desktop seem fine now. Only the mobile needs to be tweaked and I cannot resolve it. The last logo is getting cut off.
Hey Again,
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (max-width: 768px) { #footer-outer div#media_image-8 { top: 26px !important; right: -20px !important; } }Thanks
ThemeNectar Support Team
Thank you. I am getting closer. But I wish to make the mobile footer height taller so that the "USA A Study Destination" is under the social media icons. Now they are next to each other and I cannot make the footer height change to accommodate this.
Hey AGain,
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (max-width: 768px) { #footer-outer div#media_image-8 { top: 85px !important; left: 0px !important; } #footer-outer #copyright { margin-bottom: 80px !important; } }Thanks
ThemeNectar Support Team
Thank you again for all this help. Now I cannot get the social media icons above the logo just on the tablet format. Any changes I make to that CSS for a tablet affects the iPhone responsive layout.
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (max-width: 690px) { #footer-outer div#media_image-8 { top: 85px !important; left: 0px !important; } #footer-outer #copyright { margin-bottom: 80px !important; } }Thanks
ThemeNectar Support Team