Home › Forums › Free Themes › Musicsong › Adjust header image height
Tagged: header height, header image
- This topic has 11 replies, 2 voices, and was last updated 4 years, 8 months ago by
wensolutions.
-
AuthorPosts
-
December 7, 2019 at 10:34 am #111086
deuce25
ParticipantThe header image for sub-pages is 1920 x 580 but when you view a sub page the height is huge and full screen.
Is there some custom CSS I can use to set the header image height?
December 9, 2019 at 3:26 am #111153wensolutions
KeymasterHello,
As for now, to reduce the height of image, please add following given CSS code in Additional CSS section by going to Admin Panel > Appearance > Customize > Additional CSS
#page-site-header { padding: 0px; height: 80vh; }
You can replace ’80vh’ with your desired pixel.
Hope this helps.
If you have any queries further, let us know.
Thank you.
December 10, 2019 at 2:04 pm #111297deuce25
ParticipantThank you so much for the quick help. It worked perfectly.
I just have one other little issue I can’t figure out. On the home page of https://coltonmclauchlin.com/ the main image is not being mobile responsive (it’s not sizing down on mobile devices). Images on the rest of the site pages work fine.
What am I overlooking?
December 10, 2019 at 2:15 pm #111298deuce25
ParticipantCorrection, it is scaling down on mobile devices but the person in the pic gets “lost” on phones because he is on the far left.
Is there some CSS I can use to have the entire pic scale down as a whole so the entire pic stays viewable?
December 10, 2019 at 3:03 pm #111302deuce25
ParticipantI tried this but it didn’t work. Mind you, I am not versed in CSS. 🙂
#featured-slider {
width: 100%;
height: auto;
}December 10, 2019 at 11:39 pm #111333wensolutions
KeymasterHello,
Please add following given CSS code to solve the issue in Additional CSS section by going to Admin Panel > Appearance > Customize > Additional CSS
@media screen and (max-width: 768px){ .home .featured-slider article{ background-position: initial; } }
Hope this helps.
If you have any queries further, let us know.
Thank you.
December 11, 2019 at 9:01 am #111370deuce25
ParticipantThank you very much! It’s very nice of you to help people using your free products!
Happy holidays!
December 11, 2019 at 10:50 pm #111416wensolutions
KeymasterHello,
Glad that we could help you.
If you have further query, let us know.
Thank you.
December 16, 2019 at 2:16 pm #111713deuce25
Participant1. For the mobile version of https://coltonmclauchlin.com is there a way to have the hamburger menu below the logo instead of on top so the logo isn’t covering the top of my head?
2. How can I make the menu background solid black instead of transparent?
December 17, 2019 at 2:26 am #111809wensolutions
KeymasterHello,
Regarding changing the position of hamburger menu in mobile view section, Please add following given code:
@media screen and (max-width: 414px){ .wrapper .site-menu{ display: flex; flex-direction: row-reverse; } }
Also, Please add following given code to make the menu background solid black instead of transparent.
.wrapper .main-navigation{ background-color: #08090a; } @media screen and (min-width: 1024px){ #social-navigation{ background-color: #08090a; float: none; } }
Hope this helps.
If you have any queries further, let us know.
Thank you,
December 17, 2019 at 9:00 am #111960deuce25
ParticipantYou guys are awesome!
One last thing. How do I make the black menu background full width and cover all the way to the top so it’s a black bar across the entire top? It also seems to be missing a line of black under social navigation.
Thanks!
December 17, 2019 at 11:35 pm #112005wensolutions
KeymasterHello,
To make the black menu background full width, please add following given CSS code:
.site-header{ background-color: #08090a; } @media screen and (min-width: 415px){ .site-header{ padding-top: 10px !important; padding-bottom: 10px !important; } }
Please remove the code we have provided earlier.
Hope this helps.
Thank you.
-
AuthorPosts
- You must be logged in to reply to this topic.