Home › Forums › Pro Themes › Graduate Pro › Graduate Pro header area
Tagged: graduate pro footer area
- This topic has 10 replies, 3 voices, and was last updated 2 weeks, 5 days ago by
Psink.
-
AuthorPosts
-
July 28, 2024 at 11:29 pm #196269
Terri
ParticipantJust purchased and installed the Graduate Pro theme for a client. Would like to have the social media icons and “Connect with a Counselor box to appear on this new website in the header area (right side) like Graduate Pro demo. I don’t see an area in the customization section to make this happen. Please advise.
July 31, 2024 at 12:12 am #196389Psink
KeymasterYou can add social icons from the widget area. Go to Customizer >> Widgets >> Header Widget Area, from there you can add social icons from two different widgets, one with “Social Icons” and the other with “TP: Social Link”.
Here is the screen record of adding social links https://www.awesomescreenshot.com/video/30046278?key=1d39d61974e5a3be8771f8c984335f96
August 4, 2024 at 10:53 pm #196399Doug Davis
ParticipantThank you. I appreciate your reply.
I did finally figure it out right before you emailed me. However, when I added the button and two social media URLs I end up with a huge amount of white space that I can’t seem to get rid of.
Even if I delete the button and social media icons, I’m still left with a lot of space in the header area. https://new.numismaticcrimes.org/
Any ideas on how to correct this?
August 4, 2024 at 11:34 pm #196412Psink
KeymasterTo fix lot of space in the header, you can add the bellow CSS to Additional CSS
.site-header .pull-right{
display: none !important;
}August 6, 2024 at 11:02 pm #196425Doug Davis
ParticipantBanner image for web pages other than home page. I’m trying to remove the black overlay or reduce the opacity for the banner image. No changes work… tried removing background color altogether, tried reducing opacity, tried display: none and can’t get the black overlay removed. Please advise. We would like to see clear image with no overlay since image is already on the dark side.
.black-overlay {
width: 100%;
height: 100%;
background-color: #000000;
position: absolute;
top: 0;
opacity: 0.5;
left: 0;
}August 6, 2024 at 11:03 pm #196423Doug Davis
ParticipantI added the code to Additional CSS and nothing changed. I would like this header area to look exactly like the demo of Graduate Pro when I add the social media icons and the “Connect with Counselor” but it doesn’t. The “Connect with Counselor” button is huge and takes up too much space. The social media icons drop to a second line which make the header area huge. How do I get what the demo displayed? Thanks.
August 11, 2024 at 11:47 pm #196452Psink
KeymasterPlease, add this CSS. It include CSS to remove black overlay of the banner image and the CSS to fix the header space
#masthead .container .pull-right .widget .wp-block-buttons{
margin: 0px !important;
}#masthead .container .pull-right{
display: flex !important;
padding: 20px 0 !important;
}.main-navigation ul > li > a {
padding: 15px 15px !important;
}.black-overlay {
opacity: 0 !important;
}@media screen and (max-width: 992px){
#masthead .container .pull-right {
justify-content: center;
}
}@media screen and (max-width: 992px){
#masthead .container .pull-right {
flex-direction: column;
align-items: center;
}
}let us know if the above CSS does not works
-
This reply was modified 4 weeks, 1 day ago by
Psink.
August 12, 2024 at 2:50 am #196450Terri
ParticipantWe could still use some assistance with the large amount of excess white space in the header area here: https://new.numismaticcrimes.org/ We want the header area to look like the Graduate Pro demo website we checked out which was one of the main reasons we decided to purchase this one. We want the small social media icons to appear in a horizontal line right before the red (or gold in our case) contact button. How do we accomplish that and reduce the excess white space.
We would also like to remove the black overlay from the image at the top of every other web page… this example: https://new.numismaticcrimes.org/category/ncic-news/ because the original image is already very dark. Can you please advise?
Please help us with these issues or we may request a refund and go to a second theme we had in mind to use for our website redesign. Thank you.
August 12, 2024 at 11:51 pm #196460Psink
Keymaster@wcms, we provided you with CSS in the previous reply regarding the header space issue. Seems you have not added that CSS in the Additional CSS. However, if you want to have the same header as in the demo you can use “TP: Social Link” and “TP: Link Button” widgets on the Header Widget Area. Also, we will provide you a CSS to make a button color golden
Please follow the screen record
https://www.awesomescreenshot.com/video/30446626?key=09c11d1d41db1ef97373e45762893f2dHere is the CSS to make the button color golden – Add this to Additional CSS as in the screen record
.graduate_pro_link_buttons a{
background: #f99f2f;
}Regarding Black Overlay – Here is the CSS to remove the black overlay of the banner image from all pages
.black-overlay {
opacity: 0 !important;
}Please add this as in the screen record
https://www.awesomescreenshot.com/video/30446738?key=75d261845cfc6e140216acfbbf1ed215Additionally, the search field is not aligned with the menu items in the header. Here is the CSS to fix that issue
.main-navigation ul > li > a {
padding: 15px 15px !important;
}After adding all this CSS your site looks something like this
https://www.awesomescreenshot.com/video/30446798?key=a023baa8554a3f64e4e908d61a126b44
I hope this will solve all of the issues
Please let us know if you need any further assistance
August 21, 2024 at 10:51 pm #196533Terri
ParticipantThank you! I had conflicting CSS added that was keeping me from getting to the layout that I wanted. This all worked out just fine.
We’re running into the same issue with the footer area as we did with the header area. You can see here: https://new.numismaticcrimes.org/ that we have huge blogs of white areas, however, we want the footer to look like what was displayed in the demo (https://themepalace.com/theme-demo/?demo=bXVNZENVRFdwWlArdTRLWTloRFhXZz09) with a solid color blue background and white text. We don’t find any settings allowing us to get rid of the big white boxes and design it like the demo. Can you help or point us in the right direction? Thanks!
August 21, 2024 at 11:27 pm #196537Psink
KeymasterPlease add this CSS
#colophon h1,
#colophon h2,
#colophon h3,
#colophon h4,
#colophon h5,
#colophon h6,
#colophon .widget {
background-color: transparent !important;
color: #ffffff !important;
}Let us know if its works
-
This reply was modified 4 weeks, 1 day ago by
-
AuthorPosts
- You must be logged in to reply to this topic.