Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • September 14, 2017 at 12:02 pm #852006
    diggital

    Hi, I’m trying to fix some responsive issues and hope you can help?

    1) I used a transparent header and set a break point at 917px, because the main nav flips into 2 lines with huge paddings between 768px and 917px.

    Problem is that reducing the height of the minimal header generates 2 lines again while scrolling down and the yellow nav is not readable.

    a) Solution could be moving the break point for the toggle menu from 768px to 917px. Where can I change it?
    b) Or increase the minimal header’s height so that the orange part covers the whole nav. No idea how to fix this without the huge gaps…

    2) I set a grid row with 2 columns 1/2 and 1/2. In the left part there is a lot of tabular text, in the right an image. It’s not really responsive, because the columns keep 50% and the text col shrinks and it’s too narrow because of the image next to it.

    How can I set the one_half column to 100% for less then 917px, so that the cols are placed one below the other and also reduce the image width?

    Thanks for helping!

    Best regards,
    Dirk

    September 17, 2017 at 5:43 pm #853099
    Mike

    Hey Dirk,
    This is the code for the newest menu brake point, adjust to suit:

    @media only screen and (max-width: 1290px) {
.av-burger-menu-main { 
     display: block!important; 
}
#top .av_mobile_menu_tablet .av-main-nav .menu-item {
     display: none!important;
}}

    Please check your custom CSS, as it looks like you may have some old menu code causing a conflict, also I see you are using v4.1.1 have you considered updating?

    Best regards,
    Mike

    September 18, 2017 at 10:19 am #853336
    diggital

    Hey Mike,
    thanks for your reply!

    Now I updated to the latest version 4.1.2 and tried your code, but it’s not exactly what I meant.
    I changed the break point to 917px, but only the burger menu icon is showing extra beside the nav.

    It would be great to have the same header behavior as you see at less then 768px, that’s what I tried before and couldn’t find the CSS.

    This code still reduces the header size, but without orange background (as my question 1) b) above:

    @media only screen and (min-width: 768px) and (max-width: 917px) {
	.av_minimal_header #header_main .container, .av_minimal_header .main_menu ul:first-child > li a {
    height: 35px;
    line-height: 90px;
}}

    Any idea for question 2) as well?

    Best regards,
    Dirk

    September 21, 2017 at 10:02 am #854675
    Ismael

    Hi,

    Please add this code at the very bottom of the css modifications.

    @media only screen and (max-width: 989px) {
.responsive #top #wrap_all #header {
    position: relative;
    width: 100%;
    float: none;
    height: auto;
    margin: 0 !important;
    opacity: 1;
    min-height: 0;
}

#top #wrap_all .header_color.av_header_transparency, #top #wrap_all .header_color.av_header_transparency .phone-info.with_nav span, #top #header.header_color.av_header_transparency .av-main-nav > li > a .avia-menu-text, #top #header.header_color.av_header_transparency .av-main-nav > li > a .avia-menu-subtex {
    color: #fccc30;
}

.responsive #top #header_main > .container .main_menu .av-main-nav > li > a, .responsive #top #wrap_all .av-logo-container {
    height: 80px;
    line-height: 80px;
}

.responsive #top #wrap_all .av-logo-container {
    padding: 0;
}
}

    Best regards,
    Ismael

    September 21, 2017 at 10:37 am #854712
    diggital

    Hi,
    thanks a lot!! This is what I meant, couldn’t find it by my own – great!!

    Do you also have a solution for my second question from above? (Getting the one_half cols below each other..)

    Best regards,
    Dirk

    September 21, 2017 at 1:23 pm #854830
    Ismael

    Hi,

    Please add this css code inside the css media query above.

    .responsive #top #wrap_all .av-flex-cells .no_margin {
    width: 100%;
    display: block;
    margin: 0;
    height: auto !important;
    overflow: hidden;
    padding-left: 8% !important;
    padding-right: 8% !important;
}

    Best regards,
    Ismael

    September 21, 2017 at 1:53 pm #854851
    diggital

    Hi Ismael,

    very good, that’s it!!! Thanks a lot!!!

    One thing left:
    Is there a way to make the image in the right col responsive?
    For less then 768px it’s too big and could be e.g. 70% of its size.
    There is also a huge padding around the text box above about 80px, how to reduce this?

    Best regards,
    Dirk

    September 22, 2017 at 8:14 am #855229
    Ismael

    Hi,

    Edit the image then add a custom css class attribute to it (ex. “custom-image”). Use the following css code to limit the size on mobile view.

    @media only screen and (max-width: 989px) {
    .custom-image img {
        width: 70%;
        margin: 0 auto;
    }
}

    For the text, edit the parent cell, add a custom css class attribute then add the following css code inside the css media query above.

    .custom-column {
   padding: 10px !important;
}

    If the custom css class attribute is not enabled yet, do this.

    // http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Best regards,
    Ismael

    September 22, 2017 at 11:27 am #855319
    diggital

    Hi Ismael,

    this works like a charm!!!
    Thanks a lot for your great support!!!

    Everything fine now :)

    Best regards,
    Dirk

    September 22, 2017 at 5:39 pm #855456
    Victoria

    Hi Dirk,

    Glad we could help :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.