Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • June 3, 2019 at 11:19 am #1106660
    mirr

    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!

    June 4, 2019 at 4:28 am #1106905
    Rikard

    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

    June 24, 2019 at 11:25 am #1112890
    mirr

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

    June 25, 2019 at 4:40 am #1113101
    Rikard

    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

    July 3, 2019 at 12:44 pm #1115460
    mirr

    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!

    July 4, 2019 at 7:56 pm #1115870
    Victoria

    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

    July 9, 2019 at 12:47 pm #1117030
    mirr

    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

    July 9, 2019 at 7:57 pm #1117171
    Victoria

    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

    July 9, 2019 at 8:01 pm #1117173
    mirr

    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;
  }
}
    July 10, 2019 at 6:23 pm #1117521
    Victoria

    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

    July 15, 2019 at 12:05 pm #1118742
    mirr

    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;
  }
}
    July 15, 2019 at 7:42 pm #1118906
    Victoria

    Hi mirr,

    Best regards,
    Victoria

    July 15, 2019 at 7:42 pm #1118907
    Victoria

    Hi mirr,

    Best regards,
    Victoria

    July 16, 2019 at 12:27 pm #1119138
    mirr

    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;
  }
}
    July 17, 2019 at 4:51 am #1119376
    Rikard

    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

    July 17, 2019 at 8:19 am #1119447
    mirr

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

    July 18, 2019 at 11:47 am #1119885
    Ismael

    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

    July 18, 2019 at 5:33 pm #1119961
    mirr

    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 :)

    July 19, 2019 at 12:21 pm #1120153
    Ismael

    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

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