Forum Replies Created
-
AuthorPosts
-
Hey Rikard
I managed to solve the problem myself, by reverting to an old version of our website in wordpress. I did not find the reason why the problem occured though.
You can close this issue.
Thanks and best Regards,
RetoHi Rikard
Thank you for coming back to me!
Please find the login details below. I have also provided a link to a document that contains the screenshots and highlights the problems.
FYI: Nikko was helping me with my website and with getting the layout working. He knows how the site used to look.
I am looking forward to hearing from you.Best Regards,
RetoHi Nikko
Thanky you very much for your solution. I have increased the font size to 20 and it works fine.
Best Regards,
RetoHi Nikko
Thank you very much for your changes! They work as we have hoped for.
You mentioned that you moved the code to WP Code. You refer to the “Change Logo Link” snippet, correct?On the mobile burger menu the menu items are displayed very small. Do you know how their font size can be changed?
Best regards
RetoHi Nikko, thanks again! I have added a child theme and this function and it works perfectly.
One problem seems to have occurred since your last change on our website (when you solved several issues: https://kriesi.at/support/topic/header-logo-and-menu-issues/) or since I introduced the enfold child theme as you described above:
1. The font color of the menu items in the header changes from white to gray when a user starts scrolling down. Also on hover over/mouse over there is no action (font should change from white to gray).As I stopped the maintenance mode, I was able to test the behavior on my mobile phone and I have found a new problem with our site on mobile screens. The header does not display correctly:
2. On mobile screen: Header is not sticky and disappears when scrolling down. Should be sticky as on normal screen.
3. Background color is not correct. Should be gradient transparent as specified in Quick CSS section.
4. Logo is too big. How can this be adapted on mobile screen?Best regards, Reto
Hi Nikko
Many thanks for this! All three point work perfectly based on your changes and input!
Best Regards, RetoMay 25, 2023 at 12:17 pm in reply to: line on the right of header is displayed in mobile view #1408518Thank you!
OK thank you anyway. Best regards, Reto
Hi Nikko, many thanks for your help! This works fine.
Best regards, RetoHi Nikko
Many thanks this works perfectly! Is there an easy way to make the reference dynamic instead of “#after_section_6”?
Best Regards, RetoMany thanks Nikko, now it looks and behaves exactly as I wanted!
Could you help me with this other problem?
Further down the website the is a header “Services” and below four Columns with fullwidth buttons. On hover over, the button changes its background color. I would like that the lines above and below the buttons has no spacing to the button. But now there is a spacing. Can you help me with reducing the spacing to 0, so that the line and the button “touch” each other?Regards, Reto
Hi Nikko
Sorry for the late reply! Please find the link in the private section.
– Screenshot 1: large screen (columns are displayed in one row) -> OK
– Screenshot 2: small screen (columns are displayed below each other, but vertical spacing is not as we would like – see red markings) -> TO BE IMPROVED
– Screenshot 3: very small screen (columns are displayed below each other with identical spacing) -> OKCan you help with this?
Talking about spacing I have one more question: Further down the website the is a header “Services” and below four Columns with fullwidth buttons. On hover over, the button changes its background color. I would like that the lines above and below the buttons has no spacing to the button. But now there is a spacing. Can you help me with reducing the spacing to 0, so that the line and the button “touch” each other?
Regards, Reto
Hi Mike
I used the css with the page id and it works fine! Thank you very much.On the second question there seems to be a misunderstanding. I would not like to swap the gradient on the header, but to have the top half of the header without gradient, but in the color rgba(20,21,23,1). The lower part of the header should keep the gradient as currently implemented.
Do you understand what I mean? Can this be implemented?Best regards, Reto
Hi Mike, thank you for your help.
I was able to solve the issue with the “PERSONALIZED & DISCRETE APPROACH” columns.. and will apply it shortly.
Regarding the header: transparent looks better than what I had before (grey) but what I would like is that the header is with gradient transpareny all the time, also upon first loading or when scrolling to the very top. Do you know how I could achieve this?And my last objective for the header is that the top half is nontransparent and only the bottom half is gradient transparent. Is this possible?
Best regards
RetoHi Nikko, thank you for your help! This looks a lot better than what I had before.
When I reduce the width of the screen, the 1/3 columns are aligned below each other already on “small screens”. Because of that, I have hidden the last separator of the first and second column also on “small screens”. This looks good regarding the separator, but the spacing is too big and is only reduced, once the screen is very small. Could you please help with this last small issue?
Best regards, RetoHi Nikko.
Please see link in private content. The section I am referring to starts with the entry “PERSONALIZED & DISCRETE APPROACH”.
There are two times six entries. The second set looks fine on a desktop. But not at all on a mobile device.
Best regards, Reto- This reply was modified 1 year, 6 months ago by retom.
Hi Mike
Please find the credentials in the private content section. I am looking forward to your feedback.
This thread referes to the header problematic. Please ignore my message above, where Î mentioned “PERSONALIZED & DISCRETE APPROACH”….I mixed this up with another tread, sorry.Best Regards, Reto
- This reply was modified 1 year, 6 months ago by retom.
Please see link in private content. The section I am referring to starts with the entry “PERSONALIZED & DISCRETE APPROACH”.
There are two times six entries. The second set looks fine on a desktop. But not at all on a mobile device.Hi Mike
Thank you for your input, which helped ocating the problem. I tried with “no transparency header” and now I have a grey header background. The problem is, that the image on the first page does not continue into the header. Do you know how I could make the image (currently: color section background) extend into the header background or “behind” the header?Also I would like to the top of the header less transparent. Is there a way to have the top half solid and the bottom half gradient transparent?
Best regards,
RetoHi Mike, thank you for your help. There was an incorrect comment sign (/*) to end a comment. I have fixed this.
Now the correct font is applied if I assign it through the advanced styling option (with H4 in my case). The font family in the inspector shows as “ibmplexserif-lightitalic”.
The correct font was not applied because I had at the same time assigned an advanced styling option to the object (eventhough I left the font as “default”). Once I deleted the advanced styling option it worked as it should.Many thanks for your help!
Hi Mike, yes, I have imported the fonts as you described above and they appear under Custom Font Manager.
Lets focus on the IBMPlexSerif font:
It appears in the Custom Font Manager like this : “Font: IBMPlexSerif LightItalic ( font-family: ibmplexserif-lightitalic )
italic: 300”
In the section where I want to use the font I have added section ID “section-services” and Custom CSS Class “my-serif-font”.
Then I added the following code in Quick CSS:
#section-services.my-serif-font {
font-family: ‘ibmplexserif-lightitalic’;
}
Unfortunately the font still does not display. (I have cleared the cache).
Could you please advise?Maybe this relates to the problem I mentioned at https://kriesi.at/support/topic/gradient-transparent-permanent-header/#post-1405259 -> DEfined fonts for H2 and H4 headers stopped being applied.
Best regardsThank you Mike for your advice!
Your css code works, once I start scolling down. When the page is initially loaded, the header is transparent (with a light color) and the logo in the header is bigger. When scrolling, the logo becomes smaller and the gradient transparent background is as I would like it.
Settings:
– in Worpress the “Header visibility and transparency is set to “Transparent and glossy header”
– Enfold under Header -> Header behaviour: Shrinking header is not checked.
How can I make sure that the Header displays correctly when initially loaded?I have used the following code:
#header.header_color > .header_bg {
background-image: linear-gradient(rgba(20,21,23,1), rgba(20,21,23,0)100%);
background-color: transparent;
I would like to make the top even less transparent. Is there a way to do this?One more question: I had defined a specific styling (font) for the H2 and H4 headers under “Advanced Styling”. After applying the changes to the header, these stylings (fonts) are not applied anymore. Do you know how I could fix this?
Many thanks in advance and please let me know if you need further information!
Works perfectly, Thank you!
Many thanks! the icons appear now as desired in the text box.
The Icons have a grey line on the left side. Could you tell me how I can get rid of that?
CheersHi Yigit
Thanks for the quick reply. I have added the Icons to the heather
Regards
Reto -
AuthorPosts