-
AuthorPosts
-
August 25, 2018 at 12:08 pm #1001610
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 #1001615Hey Mosaik-Gin,
Best regards,
VictoriaAugust 25, 2018 at 12:19 pm #1001616Hey Victoria,
I am sorry for the inconvenience! I forgot to tell you the right page.
Regards Tim
August 25, 2018 at 6:02 pm #1001689Hi 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,
VictoriaAugust 25, 2018 at 6:27 pm #1001716Hi 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 topCan 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 #1001922Hi 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,
VictoriaAugust 26, 2018 at 11:26 pm #1002053Hi 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 areaP.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 #1002219Hi 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,
VictoriaAugust 27, 2018 at 9:53 pm #1002456Hi 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 #1002980Hi,
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 -
AuthorPosts
- You must be logged in to reply to this topic.