Change Header styling - Support | Kriesi.at

Tagged: customize header

Viewing 15 posts - 1 through 15 (of 15 total)

Author

Posts
September 1, 2023 at 9:24 am #1417751

Alex Freelance
Participant

Hi there,

for the sake of me I cannot find the right class/element identifier in order to customize the header.

I want to use the following CSS code for inserting an SVG element, the method would be to use a pseudo-element, pls see the following codepen:

Could you pls help me out, any help is much appreciated!

Kind regards,
Alex

September 2, 2023 at 6:30 pm #1417892

Rikard
Keymaster

Hey Alex,

Sorry for the late reply. I’m not sure that I fully understand your intentions, but it looks like you should be able to achieve that layout using a background image in a Color Section element. Did you try that out?

Best regards,
Rikard

September 4, 2023 at 4:54 pm #1418081
Alex Freelance
Participant
Hi Rikard,

no problem, thx for coming back at me.

Been there, done that, but it does not scale well.. I believe the best possible way is to manipulate a SVG via CSS (pls see codepen from previous post) to get it as scalable as possible for different screen sizes.

this is the mockup how it should like:

I’ve provided login credentials in my last post, could you pls help out?

Best regards,
Alex
- This reply was modified 1 year, 2 months ago by Alex Freelance.
- This reply was modified 1 year, 2 months ago by Alex Freelance.
September 5, 2023 at 8:14 am #1418122
Ismael
Moderator
Hi,

Thank you for the update.

You can start with the following css code.
```
#main:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 188px;
  background-image: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'><path d='M0,0 V9 Q50,6 100,9 V0 H0' fill='%230d8dc9'/><path d='M0,9 Q50,6 100,9' fill='none' stroke='%23faf18e' stroke-width='0.9'/></svg>");
  background-repeat: no-repeat;
  background-size: cover;
}

.header_color .header_bg {
  background-color: transparent;
  border-color: transparent;
}

.html_header_top.html_header_sticky #main {
  padding-top: 186px;
}
```
You may need to add a few css media queries to adjust the background for different screen sizes.

Best regards,
Ismael
September 5, 2023 at 3:49 pm #1418172

Alex Freelance
Participant

Hi Ismael,

thanks for chiming in. Well I don’t understand which of these IDs is responsible for which element of the header. When I am using your CSS without any tweaks, it renders the whole header trannsparent. I dont know how to change the IDs.

Currently I am using already the “Transparent Header” from the Theme Options. Could you pls have a look at my site? (logins are provided in 1st post)

Thanks a million!

Kind regards,
Alex

September 6, 2023 at 6:28 am #1418235

Ismael
Moderator

Hi,

Thank you for the update.

The SVG background is not displaying when we re-enabled the css code in the Quick CSS field. Unfortunately, we are not yet sure why it’s not working on the site. The modification works as expected when we tested it on our end. What happens when you add the SVG image as header background using the theme options?

Best regards,
Ismael

September 6, 2023 at 10:46 pm #1418307
Alex Freelance
Participant
Hi Ismael,

many thanks for following up. Actually I rewrote the CSS statement for background-image using base64 encoding, now it works. Thanks a mill for your help and code example!

Sorry for hijacking this thread, instead of creating a new one, but could you pls also help me out with the following problems:
– the mobile menu does not stick at the top, I would need that mobile menu to stick at the top of the viewport, as a result the user would not need to to scroll to the very top to access navigation.
– the mobile does not use the typefonts which are used on desktop view, I would need the same typefonts used as you can see on desktop.

How would I tackle this?

Best regards!
- This reply was modified 1 year, 2 months ago by Alex Freelance. Reason: new finding
September 10, 2023 at 11:16 pm #1418698
Mike
Moderator
Hi,
Thank you for your patience, to make the header sticky on mobile try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:
```
@media only screen and (max-width: 767px) {
  .responsive #top #wrap_all #header {
    position: fixed;
  }
}
```
For the mobile menu fonts try this css:
```
@media only screen and (max-width: 767px) {
	#av-burger-menu-ul a {
	font-family: kalam;
}
}
```
After applying the css, please clear your browser cache and check.

Best regards,
Mike
September 11, 2023 at 1:23 pm #1418744
Alex Freelance
Participant
Hi Mike,

that’s brilliant, thanks a mill! Just one thing: the mobile header now overlaps with the content at the very top, I have tested with a Google Pixel 6 phone, and browser console hints at this behaviour for other mobiles, too. I dont know how to overcome, e.g. applying padding-top at the body for mobile screens only it does not solve. Any help is much appreciated! :)

Best regards
- This reply was modified 1 year, 2 months ago by Alex Freelance.
September 11, 2023 at 5:55 pm #1418786
Mike
Moderator
Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:
```
@media only screen and (max-width: 767px) { 
	.responsive #top #wrap_all #main {
		padding-top: 90px !important;
	}
	.responsive #top.home #fullslider {
		margin-top: 90px;
	}
}
```
After applying the css, please clear your browser cache and check.

Best regards,
Mike
September 12, 2023 at 1:34 pm #1418888

Alex Freelance
Participant

That’s perfect, problem solved. Thank you Mike!

Best regards,
Alex

September 12, 2023 at 5:01 pm #1418913

Rikard
Keymaster

Hi,

Great, I’m glad that Mike could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

September 13, 2023 at 11:41 am #1419020

Alex Freelance
Participant

Hi Rikard,

Thank you for your support, please close the thread!

Best,
Alex

September 13, 2023 at 12:04 pm #1419023

Guenni007
Participant

please erase that post here – i try to answer to another one that was opend on a different window :)

September 13, 2023 at 4:08 pm #1419056

Rikard
Keymaster

Hi,

Thanks for the update, we’ll close this thread for now then. Please open a new thread if you should have any further questions or problems.

Best regards,
Rikard
Author

Posts

Viewing 15 posts - 1 through 15 (of 15 total)

The topic ‘Change Header styling’ is closed to new replies.