Image logo with subtext – on mobile and tablett displays over burger

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

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 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,
added at private content all my Quick CSS. So you have all information.
CSS file at enfold-child has no code added.
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,
have another question related to the css file you provided for this styling. There is a lot of stuff in it which feels to me that I’m not using it at this moment, like all the shopping cart codes.
Is this useful for something even it is not in use? Or can I delete all redundant code?
Doesn’t it effect also the performance?
If so, could you give me a short “index” of what is necessary code for this issue here and what not – thanks!
Of course I have already saved a copy of your original code provided, just in case I would need it later on.

But unfortunately I did not saved the first one, where these color and font-size settings were in, and now I’m thinking that it would be better to write the font settings into the css file and delete at Enfold > Advanced Styling all the related settings. This way I could add also the still missing style for bold and active state color for the submenu.
Would it be possible to provide me a short example / snipped of css code for font setting at the main menu, and if appropriate, where to place it in the css file.
Would appreciate this a lot.
Thank you very much,
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 the code!

Best regards,
Britta

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