Mobile Header with fixed height and transparent - Support | Kriesi.at

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

Author

Posts
August 25, 2018 at 12:08 pm #1001610
Mosaik-Gin
Participant
Hello,

i am using a custom height header (45px) which should be transparent.
On mobile screens it should appear the same but with different structure.

Desktop
//LOGO menu | cart //

Mobile
//burger icon LOGO cart //

I figured out to get the structure but can you help me with the height and transparency on mobile screens?
```
/***HEADER***/
#top .av_header_transparency #header_meta {
    border-color: transparent;
}

div.phone-info {
    width: 100%;
    text-align: center;}

#menu-item-shop.cart_dropdown {
    float: right;
    border: 0px;}

#top .av-cart-counter{
background-color: #007672 !important;}

@media only screen and (max-width: 767px) {
.responsive #top .logo {
    width: 100%;
    text-align: center;
    position: relative;
    display: block;}

.responsive .logo img {
   display: inline-block;
   z-index: 999;
   vertical-align: middle;
   max-height: 26px;}

.responsive .logo a {
    display: inline-block;
    vertical-align: middle;}}

@media only screen and (max-width: 767px) {
nav.main_menu {
  left:0 !important;}}
```
August 25, 2018 at 12:15 pm #1001615

Victoria
Inactive Moderator

Hey Mosaik-Gin,

Best regards,
Victoria

August 25, 2018 at 12:19 pm #1001616

Mosaik-Gin
Participant

Hey Victoria,

I am sorry for the inconvenience! I forgot to tell you the right page.

Regards Tim

August 25, 2018 at 6:02 pm #1001689
Victoria
Inactive Moderator
Hi Mosaik-Gin,

Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
```
@media only screen and (max-width: 767px) {
  .responsive #top #main {
      margin-top: -88px;
  }
  #top #wrap_all .av_header_transparency {
      background-color: #ffffff0f;
  }
}
```
Maybe will need to limit the code to that page only.

If you need further assistance please let us know.

Best regards,
Victoria
August 25, 2018 at 6:27 pm #1001716
Mosaik-Gin
Participant
Hi Victoria,

thank you for your reply. Unfortunately it doesn’t fix my issues.

1) I want to have the mobile header with the same fixed height like the desktop one: #header_main height 45px
2) The section #header_meta should be transparent and the background image schould start right at the top

Can please help me further?

Best Regards Tim
- This reply was modified 6 years, 1 month ago by Mosaik-Gin.
August 26, 2018 at 6:59 pm #1001922
Victoria
Inactive Moderator
Hi Tim,

Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
```
@media only screen and (max-width: 767px) {
  .responsive #top #main {
      margin-top: -88px;
  }
  #top #wrap_all .av_header_transparency {
      background-color: #ffffff0f;
  }
  .responsive #top #wrap_all #header {
    height: 45px;
  }
}
```
If you need further assistance please let us know.

Best regards,
Victoria
August 26, 2018 at 11:26 pm #1002053
Mosaik-Gin
Participant
Hi Victoria,
I am just focusing on the header size rigth know. Unfortunately the code you provided does only affect the box istself and not all included insde. The Cart Counter is a good indication to comapre… Here you can see what I try to describe on the pictures.

1) Desktop Version: wokrs finde with fixed header size of 45px
2) The code only affects the header_main itself
3) and NOT the content included in header_main area

P.S. I changed your code slightly:
```
.responsive #top #wrap_all #header #header_main{
   height: 45px;
 }
```
Just to clearify my intention. I want to have the header (#header_main) with a fixed size of 45px. It works perfectly with the native possibility privided by enfold for the desktop view. But switching on mobile alway makes the header (#header_main) bigger.
On mobile screen the header (#header_main) with all its content is supposed to be 45px height.

How can I set the size for all content to 45px?

Regards Tim
August 27, 2018 at 11:54 am #1002219
Victoria
Inactive Moderator
Hi Tim,

Ok, now I get it, it was not clear before.
The code below addresses only the issue of the header_main beign 45px in height for screens below 767px:
```
@media only screen and (max-width: 767px) {
 .responsive #top #wrap_all .main_menu {
      height: 45px;
  }
  .responsive #top .logo {
      height: 45px !important;
  }
  .responsive #top #header_main > .container .main_menu .av-main-nav > li > a,
  .responsive #top #wrap_all .av-logo-container,
  .responsive #top #header_main #menu-item-shop .cart_dropdown_link  {
      height: 45px !important;
      line-height: 45px !important;
  }

}
```
If you need further assistance please let us know.
Best regards,
Victoria
August 27, 2018 at 9:53 pm #1002456
Mosaik-Gin
Participant
Hi Victoria,
thank you for very much for yourpatience! That help me.
But there is one thing remaining that on mobile screen the link of the Logo doesn’t work anymore.
It has something to do with this code snippet:
```
nav.main_menu {
  left:0 !important;}
```
But I am already trying to get the Logo to the fron with the code I found previously:
```
.responsive .logo img {
   display: inline-block;
   z-index: 999;
   vertical-align: middle;
   max-height: 27px;}
```
Bes Regards Tim
August 29, 2018 at 5:53 am #1002980

Vinay
Inactive Moderator

Hi,

I have added ” z-index: 99999;” to the .logo class please clear the cache and review the site. The logo link works on mobile :)

Best regards,
Vinay
Author

Posts

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

You must be logged in to reply to this topic.