Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • #1106660

    The scaling of my homepage is really weird.

    With the tablet view:
    1. the menu overflows the last 2 menu items below the normal menu.
    2. the arrows for the next news items switch places (so instead of < > they go > < )
    3. the text overlaps for the news items

    On mobile:
    1. the logo stretches really weird
    2. the burger menu is in a strange place

    Hope you can help me out, thanks!

    #1106905

    Hey mirr,

    Thanks for the login details. First off, could you try updating the theme to the latest version (4.5.7) to see if that helps please? https://kriesi.at/documentation/enfold/how-to-install-enfold-theme/#theme-update.

    Best regards,
    Rikard

    #1112890

    Hey Rikhard, all is up to date now but nothing changed.

    #1113101

    Hi,

    Thanks for the update. Please try this to switch to the mobile menu at an earlier point:

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

    And this for the logo:

    @media only screen and (max-width: 767px) {
    .responsive #top .logo {
        width: auto;
    }
    }

    Best regards,
    Rikard

    #1115460

    Hey Rikard,

    Thanks for your answer. Sorry for the late reply, I don’t receive the email with new comment..

    It is getting better but there are still some weird issues;

    Scaling the screen for half the size I get 2 burger menu’s, and the news carousel still switches the arrows en gives double text (normal text overflows the title)

    Scaling it further the logo still stretches and the menu is attached to it instead of on the right of the screen.

    Thanks!

    #1115870

    Hi mirr,

    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: 990px) {
      #header_main_alternate {
        display: none;
      }
      .av-main-nav li {
        float: right;
      }
      #top #header .av-main-nav > li > a {
        background-color: #fff;
    }
    }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #1117030

    Hey Victoria,
    Thanks for the help. It does not work sorry. When I scale the screen it still looks weird, and when I check it on mobile I have no menu at all and a logo that is stretched.

    Hope you can help me! Thanks a lot

    #1117171

    Hi mirr,

    I guess we’re getting very confused here. PLease remove all the css for the header you added and let’s start again.

    Best regards,
    Victoria

    #1117173

    Hey Victoria,
    The css I have right now is this: also because I needed the search bar in the logo header.
    What can I remove to fix this?

    @media only screen and (min-width: 990px) and (max-width: 1220px) {
      nav.main_menu {
        display: block !important;
      }
      #avia-menu .menu-item {
        display: none;
      }
      .av-burger-menu-main.menu-item-avia-special {
        display: block;
      }
    }
    
    a.slide-image {
        display: none!important;
    }
    
    .slide-content .slide-meta {
    display: none;
    }
    
    .avia-content-slider .slide-entry-title {
        font-size: 20px!important;
        text-transform: uppercase;
        color: white !important;
        height: 60px;
    }
    .html_elegant-blog .av-vertical-delimiter { display: none !important; }
    
    .avia-content-slider {
     font-size: 13px!important;
        color: white !important;
        
    }
    
    #top .avia-slideshow-arrows a.prev-slide {
     opacity: 1;
        left: 130px;
    top: -60px;
       background: #139eda;
    color: white;  
    }
    
    #top .avia-slideshow-arrows a.next-slide {
     opacity: 1;
        right: 130px;
       top: -60px;
     background: #139eda;
        color: white;  
    }
    
    .avia-content-slider {
        overflow: visible;
    }
    
    #top #header .av-main-nav > li {
        padding-left: 30px;
        padding-right: 30px;
       
    }
    
    @media only screen and (max-width: 767px) {
    .responsive #top .logo {
        width: auto;
    }
    }
    
    #top .avia-slideshow-arrows a:before {
        background-color: transparent;
    }
    
    #scrollpijl {
    background-color: transparent !important;
    }
    
    #header-home {
    background-color: transparent !important;
    }
    
    .av-main-nav > li > a { padding: 0 9px; }
    
    #header.av_header_transparency { background-color: transparent; }
    
    #top #wrap_all #footer .flex_column p{
    font-size: 12px !important;
    }
    
    .breadcrumb { 
       font-size: 10px !important;
    color: #139eda  !important;
    }
    
    .breadcrumb { 
       font-size: 10px !important;
    color: #0670b7 !important;
    }
    
    .inner_sidebar {
        margin-top: 20px !important;
    }
    
    @media only screen and (max-width: 767px)  {
    .av-burger-menu-main{
    left:300px!important;
    }
    #menu-item-search{
    left:80px!important;
    }
    .logo img{
    width:80%!important;
    }}
    
    .av-main-nav-wrap, .main_menu {
    	width: 100% !important;
            margin-left: -21px  !important;
    }
    #header .widget {     width: 20%;     position: relative;      margin-left: auto;   margin-right: auto; }  
    
    @media only screen and (max-width: 767px) { #header .widget {     width: 100%;     position: absolute;     left: 10%;     top: 100px; }}
    
    #header .widget:nth-child(1) {
      left: 80%;
      padding-top: 25;
      position: absolute;
      top: 0;
      transform: translate(-50%);
      z-index: 999;
    }
    #header .widget:nth-child(2) {
      left: 50%;
      padding-top: 15;
      position: absolute;
      top: 0;
      transform: translate(-50%);
      z-index: 999;
    }
    
    @media screen and (max-width: 800px) {
      #header .widget:nth-child(1) {
        visibility: hidden;
        clear: both;
        float: left;
        margin: 10px auto 5px 20px;
        width: 28%;
        display: none;
      }
    }
    
    @media screen and (max-width: 800px) {
      #header .widget:nth-child(2) {
        visibility: hidden;
        clear: both;
        float: left;
        margin: 10px auto 5px 20px;
        width: 28%;
        display: none;
      }
    }
    
    #1117521

    Hi mirr,

    There is a lot of code for the header in different places and I do not see the search in the header. Did you remove the widget?

    Best regards,
    Victoria

    #1118742

    Hey Victoria, Something went wrong haha.
    I fixed it and cleaned up the code:
    Still have a few problems left: (http://quirktools.com/screenfly/#u=http%3A//www.medexs.nl&w=1024&h=768&a=22&s=1)
    – The arrows, the menu to the left and double on ipad.

    @media only screen and (max-width: 1220px) {
      nav.main_menu {
        display: block !important;
      }
      #avia-menu .menu-item {
        display: none;
      }
      .av-burger-menu-main.menu-item-avia-special {
        display: block;
      }
    }
    
    a.slide-image {
        display: none!important;
    }
    
    .slide-content .slide-meta {
    display: none;
    }
    
    .avia-content-slider .slide-entry-title {
        font-size: 20px!important;
        text-transform: uppercase;
        color: white !important;
        height: 60px;
    }
    .html_elegant-blog .av-vertical-delimiter { display: none !important; }
    
    .avia-content-slider {
     font-size: 13px!important;
        color: white !important;
        
    }
    
    #top .avia-slideshow-arrows a.prev-slide {
     opacity: 1;
        left: 130px;
    top: -60px;
       background: #139eda;
    color: white;  
    }
    
    #top .avia-slideshow-arrows a.next-slide {
     opacity: 1;
        right: 130px;
       top: -60px;
     background: #139eda;
        color: white;  
    }
    
    .avia-content-slider {
        overflow: visible;
    }
    
    #top #header .av-main-nav > li {
        padding-left: 30px;
        padding-right: 30px; 
    }
    
    #top .avia-slideshow-arrows a:before {
        background-color: transparent;
    }
    
    #scrollpijl {
    background-color: transparent !important;
    }
    
    #header-home {
    background-color: transparent !important;
    }
    
    .av-main-nav > li > a { padding: 0 9px; }
    
    #header.av_header_transparency { background-color: transparent; }
    
    #top #wrap_all #footer .flex_column p{
    font-size: 12px !important;
    }
    
    .breadcrumb { 
       font-size: 10px !important;
    color: #139eda  !important;
    }
    
    .breadcrumb { 
       font-size: 10px !important;
    color: #0670b7 !important;
    }
    
    .inner_sidebar {
        margin-top: 20px !important;
    }
    
    #menu-item-search{
    left:80px!important;
    }
    
    .av-main-nav-wrap, .main_menu {
    	width: 100% !important;
            margin-left: -21px  !important;
    }
    #header .widget {     width: 20%;     position: relative;      margin-left: auto;   margin-right: auto; }  
    
    #header .widget:nth-child(1) {
      left: 80%;
      padding-top: 25;
      position: absolute;
      top: 0;
      transform: translate(-50%);
      z-index: 999;
    }
    #header .widget:nth-child(2) {
      left: 50%;
      padding-top: 15;
      position: absolute;
      top: 0;
      transform: translate(-50%);
      z-index: 999;
    }
    
    @media screen and (max-width: 800px) {
      #header .widget:nth-child(1) {
        visibility: hidden;
        clear: both;
        float: left;
        margin: 10px auto 5px 20px;
        width: 28%;
        display: none;
      }
    }
    
    @media screen and (max-width: 800px) {
      #header .widget:nth-child(2) {
        visibility: hidden;
        clear: both;
        float: left;
        margin: 10px auto 5px 20px;
        width: 28%;
        display: none;
      }
    }
    
    
    #1118906

    Hi mirr,

    Best regards,
    Victoria

    #1118907

    Hi mirr,

    Best regards,
    Victoria

    #1119138

    Sorry I don’t understand. When I remove the code it shows me the burger menu on fullscreen also.

    @media only screen and (max-width: 1220px) {
      nav.main_menu {
        display: block !important;
      }
      #avia-menu .menu-item {
        display: none;
      }
      .av-burger-menu-main.menu-item-avia-special {
        display: block;
      }
    }
    #1119376

    Hi,

    Thanks for the update, I still see the code in Quick CSS though. Are you sure that you are not getting cached results after removing it?

    Best regards,
    Rikard

    #1119447

    Hey Rikard, I put it back because it gives me the burger menu on the normal homepage when I remove the code mentioned above.

    #1119885

    Hi,

    Thank you for the update.

    We removed the following css code to get rid of the second burger menu.

    nav.main_menu {
        display: block !important;
    }

    Best regards,
    Ismael

    #1119961

    Great, thanks a lot! Only problem now is the burger menu being left instead of right. If we can fix that I would be very happy :)

    #1120153

    Hi,

    Thank you for the update.

    You can add this code inside the css media query where we removed the previous one.

    .av-main-nav li {
        float: right;
    }
    

    Best regards,
    Ismael

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