- This topic has 16 replies, 2 voices, and was last updated 3 years, 5 months ago by
.
-
Posts
-
Hey guys,
Not sure why, but I am trying to get my Home Page Navigation, to site ver a new banner image I have added to the site. I have added some transparency to the Navigation, which works when I scroll down, but doesn’t work when I scroll to the top of the page. I can’t seem to figure out if the transparency isn’t working or the new Banner Image is not positioned behind the navigation? How can I get the Navigation to site infront of the new banner image with some transparency?Thanks
Customer Support
Hi Troyw,
This is what I’m seeing from my end, viewing your site: https://share.getcloudapp.com/nOu1dxxO
I can’t seem to grasp the concept of the issue though. Which Banner Image are you referring to? Can you take screenshots of the issue from your end for reference?
Uploading Screenshots: https://docs.generatepress.com/article/using-the-premium-support-forum/#uploading-screenshots
Hey Fernando,
Your image is what it looks like if you scroll down a little, but if you are viewing without scrolling down at all, the Navigation Background is pure white. I want it to be half transparent, so that we can see the banner image behind it. The usual methods to do this are not working for some reason?
ThanksI see. Have you created a Header Element set to merge for your Front page?
If not, can you create one first?
I was hoping to avoid this, but have added it as an element now. Having some issues though.
The Navigation Text Colour in the element needs to be independent to the navigation on other pages?Also, i have positioned the headline text, but when I shrink the screen width the text squashes up. How do i stop this and make the text change size responsively?
Also, you will notice that the word ‘Powerful’ is blue, which is what I want. However it now has a yellow background? I used this html to make it blue
<mark style="color:#63e3ff">powerful</mark>but why is the background yellow?Thanks
I see.
For the colors, you can set the Navigation Colors specific to where the Header Element displays through its settings. Example: https://share.getcloudapp.com/4gu40P2B
Can you try this?
As for the Headline, can you check the Block Settings of this Headline on mobile view and make sure that it’s similar to what’s set on Desktop?: https://share.getcloudapp.com/ApueQEz0
As for the color, can you check if that specific text is highlighted? If so, can you alter it to your preference? See: https://share.getcloudapp.com/6quNOvv7
Hey Fernando,
I have fixed the Navigation colours now and the Headline Responsiveness, thanks.The Headline is still playing up though. I can’t change the Block settings as I am using a header element. There are no blocks.
As you will see, the word “Powerful” has a yellow background, which I don’t want and can’t understand where is is coming from?
Thanks
I see. To clarify, do you have a Header Element in conjunction with a Block Element – Page Hero?
Specifically, how are you adding the Headline in question?
Can you provide admin credentials, and we’ll check your structure and see where the yellow background is coming from?
Please use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information
No, I am only using the Header Element.
I have added the headline in the element labeled “Home Header” which I created. The Headline is designed with HTML in the Page Hero.
I am also finding that in Page Hero, if I set any left and right padding at all in Mobile, it then uses my line breaks when viewed on a Mobile device. I know it probably should do this, but ideally I would like the Headline to use most of the width of the Mobile screen, but ignore my
<br>html when viewed on a mobile device. As you will see, I have left out the Mobile Left and right Padding, but the headline is too thin in Mobile view? How can I make the Headline stretch across wider in Mobile Mode, without introducing my line breaks?Cheers
I see. You can leave the Header Element blank, and don’t set a Background Image as well.
Our primary advice would be just to use the Header Element for the merge setting and nav colors. Then, create everything else in for the Page Hero through a Block Element – Page Hero. They should work side by side, and this is the ideal setup to create the look you’re going for.
Doing this should also address the other issues. You can fix the color, spacing and other stuff if you use this ideal setup.
All done, thanks Fernando.
You’re welcome Troyw!
I cannot get these Logos to work. The sizing is all over the place.
If I use the Logos in Customiser, they size perfectly. If I use the same Logos in the Header Element, they are huge and I can’t do anything to fix the size?You don’t need to add Logos through the Header Element. You can remove those and retain the one from the Customizer.
Only add a logo there if you want a totally different logo for a specific page.
I need to use a white Logo for the home page and dark for the other pages. If I add a white logo in customiser, I cant see it on other pages because background is white. So I need one logo for the entire site, but another for the header.
But even if I try to resize the logo image in use in the Header Element, it appears huge.
I can add this CSS and it fixes it, however when I scroll down the Sticky logo is affected..site-header a img { max-width: 50%; }
- You must be logged in to reply to this topic.
