i want to keep company name next to logo - Support | Kriesi.at

hello it worked but its showing half of the text

May 30, 2020 at 12:48 pm #1217972

.logo, .logo a {
    overflow: visible !important;
}

and – sorry Victoria – maybe this is a little more elegant:
– so get rid of :

.subtext {
    display: block;
    left: 120px;
    position: relative;
    top: -65px;
}

.header-scrolled .subtext h1 {
    font-size: 18px;
}

and instead – and maybe only for non-responsive case

@media only screen and (min-width: 768px) {
  .logo img {
    float:left
  }

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

  #top .subtext {
    float:left;
    position:relative;
    padding-left: 18px;
    top:50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  #top .subtext .logo-title h1 {
    margin-bottom: 0;
  }

  .header-scrolled .subtext h1 {
    font-size: 18px;
    transition: all 0.3s ease
  }
}

after that we will see how to style the small screens.

best would be to include the heading font-size with shrinking amount – but that will be done only with a child-theme avia-snippet-sticky-header.js file

May 30, 2020 at 2:41 pm #1217998

Give this a try get rid of all code above – it will be included here in a whole bunch.
On mobile or responsive case this header stayes fixed – on very small screens your headline will be in 3 lines:

@media only screen and (min-width: 768px) {
  .logo img {
    float:left
  }

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

  #top .subtext {
    float:left;
    position:relative;
    padding-left: 18px;
    top:50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);   
  }

  #top .subtext .logo-title h1 {
    margin-bottom: 0 !important;
    transition: all 0.5s ease
  }

  .header-scrolled .subtext h1 {
    font-size: 18px;
    transition: all 0.5s ease
  }
}

/****** no conflict with Main Menu and Logo *************/
@media only screen and (min-width: 768px) and (max-width: 840px) {
 .subtext h1 {
    font-size: 24px !important;
    transition: all 0.5s ease
  }
}

/****** responsive case when burger is visible *************/
@media only screen and (max-width: 767px) {
  .responsive #top #wrap_all .container {
    width: 95%;
    max-width: 95%;
  }
   
  #header {
    position: fixed !important;
    height: 80px !important;
    max-height: 80px !important;
  }
  
  .responsive #top .logo {
    display: flex !important;
  }
    
  .responsive #top .av-logo-container ,
  .responsive #top .logo a,
  .responsive #top .logo img {
    height: 80px !important;
    max-height: 80px !important;
  }
  
  .responsive #top .av-main-nav .menu-item-avia-special a {
    height: 80px !important;
    line-height: 80px !important;
  }
   
  .logo img {
    float: left
  }
  
  #top .subtext {
    float:left;
    position:relative;
    padding-left: 18px;
    top:50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%); 
  }
  
  #top .subtext .logo-title h1 {
    font-size: 18px !important;
    margin-bottom: 0 !important;
    transition: all 0.5s ease;
    font-size: 22px !important;
  }  
}

/****** Very Small Screens Iphone 5 etc *************/
@media only screen and (max-width: 399px) {
  #top .logo,
  #top .logo a {
    overflow: visible !important;
  }
  
  #top .subtext .logo-title h1 {
    word-wrap:  break-word !important;
    white-space:  normal !important;
  } 
  
  .logo img, #top .subtext {
    float: none
  }
  
  #top .subtext {
    position: absolute;
    padding-left: 80px;
    top:50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%); 
  }
}

June 3, 2020 at 10:26 am #1218996

hello sir sorry for the late reply i am trying to change now but i cant not access my site http://oasisconsulting.co.tz/

June 4, 2020 at 12:48 pm #1219359

Rikard

Keymaster

Hi,

Thanks for the update. I only see a message saying “File not found.” when trying to access your site. Do you know why that happened? Did you change anything on the site?

Best regards,
Rikard

June 4, 2020 at 9:09 pm #1219555

How did you try to implement this code above?
Do you work with a child-theme ?

June 5, 2020 at 8:47 am #1219707

hello my host provider fixed for me but i got this problem after keep that code now i can edit can you tell were i can keep this code were it was mentioned in this
#1217998

June 5, 2020 at 8:48 am #1219709

sir can i give you my login access and keep for me the code i really don’t want to mess it up

June 5, 2020 at 9:04 am #1219713

okay i tried sir it worked

June 5, 2020 at 5:42 pm #1219858