Hi,
the header image area is by default 800 px high. You could
1) change your image to a size like 1920 x 800 px
or
2) change the header image area hight to a smaller value that fits your image. You can do this in the customizer under header area.
Thread Starter
gokh
(@gokh)
I have tried 850x238px, 500×938, 1920×800, 300×84, 1920x250px, 1000x130px.
Image is large or small, it covers the entire Image screen. I just want it to be a little high on the top.
850x238px, 500×938, 300×84, 1920x250px, 1000x130px
All of these sizes makes no sense. The default header image container size is about 1920 x 800 px. 850, 500, 1000 and 300 px width is far to small. The image will cover the header area. Therefore it should be around 1920 x 800 px. If that doesn’t fit your needs please describe what you need, maybe include some screenshots to clarify things up.
Thread Starter
gokh
(@gokh)
Please navigate to Appearence > Customize > Header Area > Header Settings and change the image height there.
Thread Starter
gokh
(@gokh)
• it is OK
• Header text alignment?
• Header text animation possible?
To align it more at the bottom use this
.parallax-header.header-image .parallax-text {
top: 220px !important;
}
An animation is not possible.
Thread Starter
gokh
(@gokh)
Header image, text-transform: capitalize does not change.
.parallax-header.header-image .parallax-text {
top: 250px !important;
text-align: left;
text-transform: capitalize;
}
Header image, text-transform: capitalize does not change.
Capitalize just changes the first letter from each word and it is working. Please see this page to see how text-transform works.
I will mark this topic as resolved. Please let me know in another topic if you have further questions.
Thread Starter
gokh
(@gokh)
I think the code you sent seems to be problematic.
background-color does not change.
https://i.hizliresim.com/jyqD39.jpg
Thanks..
I didn’t sent any background-color or opacity code in this topic. Therefore I can only guess what you mean. Please try to keep the topics organized.
As you can see in this screenshot of your site it’s not useful to remove the background color completely through the opacity, since all the menu information is lost.
Please describe which code you mean and what didn’t work as you expected. Do you mean for the slider? Do you mean the header image? Which page do you refer to?
Thread Starter
gokh
(@gokh)
Hi,
• The codes are working. I mentioned the yellow warning points, would that be a problem
for the site?
• nav-container bottom-top 3px does not change.
.nav-container {
background: #202529;
border-bottom: 1px solid #fff;
position: relative;
z-index: 749;
}
• topbar and contact info mobile phone possible?
https://i.hizliresim.com/dOLmvV.jpg
Thanks..
The codes are working. I mentioned the yellow warning points, would that be a problem for the site?
I think this will not be a problem. It seems that there is a space before background-color. Try to remove that.
nav-container bottom-top 3px does not change.
If any of your CSS code isn’t working you can try to add !important at the end. For example
.nav-container {
background: #202529 !important;
border-bottom: 1px solid #fff;
position: relative;
z-index: 749;
}
However you might need to be careful since this might overwrite certain other rules and bring up unwanted behaviour in other scenarios. If you want to change a value, feel free to ask for the right code. Alternatively you could look up the right CSS class with the webdeveloper tools of your browser.
Take a look at this screenshot. As you can see the correct class you need isn’t .nav-container but .has-header #masthead.above:not(.above-solid) .nav-container.
topbar and contact info mobile phone possible?
Use this CSS
.topbar .tel::before {
content: "\f10b";
font-size: 24px;
line-height: 0;
position: relative;
top: 2px;
}
The icon you sent is from FontAwesome 5.0 which can’t be used with Meteorite. The icons you can use are these from 4.7.
