Perfect, thank you Yigit!

Thanks Ismael!

Hi Shannon,
thanks for asking.
I took my time to finish this subject and to digest the input I received here. Now it is done.
If somebody comes along and would be interested in how I did it, here I share my code:

/*Add your own styles here:*/

/*===================
 Header widget position
====================*/

/* enable flex at header */
.container.av-logo-container .inner-container {
    display: flex!important;
    /*background: #eee;*/
    flex-direction: row;
    flex-wrap:wrap;
	padding: 8px 0 0 0
}

/* position - elements in header */
#top #header .logo,
#top #header .widget {
   position: relative;
}

/* Logo - Position */
#top #header .logo {
    /*background: #ffdd00;*/
    order:1;
}

/* Menu - Position */
#top #header .main_menu {
    order:3;
    flex-grow: 1;
}

/* Header widget - Position */
#top #header .widget {
    order:2;
	padding: 0px;
	/*background: #f222;*/
}

/* (Reset default theme styles - original naming) - position of widget text in header */
.responsive #top #header #header_main .inner-container .widget:nth-child(3) {    
    margin-top: 10px;
    clear: none!important;
    margin-left: 10px;
    margin-right: auto;
}

/* ==============
  CSS - Logo overlap content 
================= */

#top .logo,
#top .logo a{
  overflow: visible;
}

.logo img {
    height: 140%;
    max-height: 140px !important;
}

/* =================
  Mobil + Tablet Settings
==================== */

@media only screen and (max-width: 767px) {
	/* fixed header */
.responsive #top #header { 
	position: fixed!important; 
}
	/* height header_main */
#header_main {
	height: 71px;
}

#top .logo,
#top .logo a {  
	max-width: 90% !important;
	width: 90px !important;
 }
    
/* Position of Text in Header-Widget */
.responsive #top #header #header_main .inner-container .widget:nth-child(3) {    
    margin-top: 20px;
    clear: none!important;
    margin-left: 10px;
    margin-right: auto;
}
}

@media only screen and (min-width: 768px) and (max-width: 989px) {
/* fixed header */
.responsive #top #header { 
position: fixed!important; 
}
/* height header_main */
#header_main {
	height: 67px;
}

#top .logo ,
#top .logo a {  
max-width: 100% !important;
  width: 100px !important;
 }

.logo img {
    height: 100%;
    max-height: 100px !important;
}
     
/* Position of Text in Header-Widget */
.responsive #top #header #header_main .inner-container .widget:nth-child(3) {    
    margin-top: 17px;
    clear: none!important;  /* Element remains adjacent to floated elements*/
    margin-left: 0px;  /* weil Logo container hier breiter ist als bei den anderen und damit automatisch Abstand haelt */
    margin-right: auto;
}
}

/* =====================
  Header + Widget at very small screen on media 
========================*/

@media only screen and (max-width: 320px) {
/* hide widget on very small screen */
    #top #header .widget {
    display: none;
}
}

Learned a lot through this project.
Thanks a lot,
Britta

Hi Vinay,
thank you very much for all the clarifications.
Now I know that the broken looking site at normal screen (sticky header not working, white space between Header and fullscreen slider, which is not showing up as fullscreen …) all this is NOT related to CSS and JS merging, rather than to the style sheet, which is overwriting many settings. I tested it today, without style sheet everything is in place again, but of course the logo settings are gone with that…
So I have quite a bit to do to bring both together.
I learned a lot through this process here.
Thank you very much for your support.
Best regards,
Britta

Hi Vinay,
thank you very much for this great job and all your willingness and support!!!!
So far it looks great, the overflow is showing up even at mobile screen – GREAT!!! – (Didn’t expected that …)

Now I’m getting the idea and I’m working at the responsive part, because at mobile your settings looks great but at larger screens the font could be a bit bigger… so I’m using the above snippets provided by Victoria, only changed “media screen only” to “media only screen” (the code editor at my host “asked” for this change) – and it works :)) – ok, still have to refine…
…and to clean up the duplicates at Enfold > Advanced Styling once I understand clearly what is what at the css file, so I can find the duplications, but till now haven’t found any.
Looks like you already deleted font styling at css?!

Now for my understanding:
CSS and JS merging – you said: “enable once the customization process is completed”
I understand that you refer to the customization process at the Logo – or do you mean also the customization process at the header in total or even more – is it related to all the changes I do at style.css?
What happens if I need to add or change something later? Can I enable and disable / or even should I enable and disable always CSS and JS merging before I make changes at style.css?
Thanks for clarifying this.

And will it be necessary to make all the changes and setting related to the header at style.css in the future?
I’m asking because I see that my old setting of header heights is still in the settings but overwritten by the style sheet. What do I do with these settings, this is a kind of duplication as well, isn’t it?

Append search icon to main menu is still enabled but not showing up – is this related to the CSS and JS merging?
Thanks for clarifying this also.

Best regards,
Britta

Hi Vinay,

thanks for your help!

I did everything you instructed me.

But this leaves me quite in a helpless state – don’t know what to do with that actual state – as I mentioned I’m only learning by doing and am not a professional here…

Thanks for further instructions,
Britta

Hi,
any input here?

Meanwhile I created a second logo only for mobile using your code provided in your documentation.

This worked out fine – BUT the overflow text from the main logo ist still hanging along over the burger-menu on the mobil screen.

How can I get rid of this?

Thanks,
Britta

Hi Ismael,
thanks for your answer regarding positioning.
Login details in privat content.

CSS file at Child Enfold is “empty” – I only use the Quick CSS field.

Data at Child Enfold function.php:

<?php

/*
* Add your own functions here. You can also copy some of the theme functions into this file.
* WordPress will use those functions instead of the original functions then.
*/

add_filter(‘avf_logo_subtext’, ‘kriesi_logo_addition’);
function kriesi_logo_addition($sub) {
$sub .= ‘<h1>Zahohie</h1>’;
return $sub;
}

Don’t know what you mean with

provide a screenshot of the expected header layout on mobile view

How do I do this?

I have a png as Logo and would like to have the text “Zahohie” written at the right side, same as on big screen, but smaller.

The Logo on the mobile screen, as it is displayed at the moment, already feels a bit big and I was thinking that it should be a bit smaller, but how do I do this?

I try to explain what my idea of the Logo and Text positioning at mobile screen is:
Because the overflow position for the logo at mobile screen is not possible so I would position the text on the right side of the logo, and it should be a bit under the wing or close to the upper end of the right wing. So that the upper right wing and the upper text area are in line. And I think that the text as it shows up at the moment at the mobile screen should be a bit smaller as well.
Hope you understand what I mean.

Thanks,
Britta

Hi Victoria,
thank you very much.
I tried to set your code into Quick CSS, didn’t work, and as I use a Child Theme, I put it into the enfold-child style.css file, but didn’t work easer. Nothing seems to work what I put into the child style sheet anyway …
But Quick CSS worked fine up to now.

This is the code I have in Quick CSS until now:

/*Add space around the logo*/

#header_main {
/* Increase the top and bottom space */
padding: 8px 0;
}

#top #main {
/* If the header overlap your content adjust the padding top value */
padding-top: 130px;
}

/* CSS – Subtext on right */

#top .logo,
#top .logo a {
overflow: visible;
}

/* Subtext styling */
.logo .subtext h1 {
font-size: 42px;
font-weight: 600;
}

.logo .subtext {
position: absolute;
top: 65%;
right: 0;
transform: translate(111%, -50%);
z-index: 999;
}

/* CSS – Logo overlap content */

#top .logo,
#top .logo a{
overflow: visible;
}

.logo img {
height: 140%;
max-height: 140px !important;
}

/* CSS – Font MainMenu */

.av-main-nav>li>a span.avia-menu-text {
letter-spacing: 1px !important;
font-weight: bolder !important;
}

I had put your code right before the “CSS – Logo overlap content” – because before I learned that subtext position and styling has to be “anchored” with the Logo – and the overlap content is like a different theme… (at least this is how it worked out at the end with the subtext positioning)

Am I right with the positioning of your code or doesn’t it matter?

With your code I do not understand very well what “right: 195px” means, what does it do? – I tried to change it to different px like 95px and 295px, a bit extremes, but to see if any thing changes, but it doesn’t at all.

So I wonder if this could be because the code already set for the positioning of the subtext is so different..?

Appreciate a lot your insights!
Thanks,
Britta

Hi Jordan,
it looks like the maintenance page is on because I use this page as information…

… => but you can scroll down and click at any link and it will bring you to the main site with its menu – at least it works for me when I’m locked out of WP or I’m using my smartphone.

Thanks for looking at it,
Britta