Thanks, I guess I fixed my css by coping each code one by one back in.
On Desktop everything looks good again.
But the button on the mobile slider just won’t change.
Here is my current full css.

/* Header mobile */
@media only screen and (max-width: 767px) {
  .responsive #top #wrap_all #header {
    position: fixed;
  }
}
@media only screen and (max-width: 767px) {
.responsive #header_main .container {
    height: 50px !important;
}
.responsive .logo a {
    vertical-align: top !important;
}
.responsive .logo img {
    max-height: 50px !important;
}
}
@media only screen and (max-width: 767px) {
.responsive #top #wrap_all .main_menu {
    top: -15px;
    height: 45px;
    left: auto;
    right: 0;
    display: block;
    position: absolute;
}
}
@media only screen and (max-width: 500px) { 
.responsive #top #wrap_all #main {
        padding-top: 50px !important;
    }
}
/* Farbe Nachrichtenversand */
h3.avia-form-success{
 color:#99a502!important;	
}
/* Text mit Foto*/
.avia_textblock p img {
	  border-radius: 100%;
	  box-shadow: rgba(255, 255, 255, 0.6) 0px 0px 4px 4px;
}
.avia_textblock img.alignleft {
  margin-right: 40px;
margin-bottom: 20px;
}
@media only screen and (max-width: 767px) { 
#hello .avia_textblock img {
	width: 50%;
}
}
/* ScrollDown Pfeil */
#top .scroll-down-link {
	color: #a47654;
}
/* Blog Leerzeile entfernen */
.page-id-691 #after_section_2 {
  display: none; 
}
/* Blog Postdatum entfernen */
.page-id-691 .av-masonry .av-masonry-date {
  display: none; 
}
/* SocialMedia Icons*/
#top #wrap_all .av-social-link-instagram:hover a, #top #wrap_all .av-social-link-instagram a:focus {
    color: #fff;
    background-color: #c82161;
}
/* Icon Circle schneller*/
.avia_start_animation .avia-icon-circles-inner {
  transition: all 0.2s cubic-bezier(0.175,0.885,0.320,1.275);
}
/* Desktop Menu*/
@media only screen and (max-width: 2500px) {
  #top #header.av_header_transparency .av-main-nav > li.menu-item  {
      display: none!important;
  }
  #top #header.av_header_transparency .av-burger-menu-main {
      cursor: pointer;
      display: block!important;
  }
}
/* Header Button Desktop*/
@media only screen and (max-width: 450px) { 
.slideshow_inner_caption {
	top: -40px;
}
}
@media only screen and (min-width: 768px) { 
#top .caption_bottom .slideshow_caption .slideshow_inner_caption {
    position: relative;
    text-align: center;
}
#top .slideshow_inner_caption .avia-slideshow-button.avia-button {
    width: 500px;
    height: 56px;
    font-size: 22px;
}
@media only screen and (min-width: 768px) { 
.slideshow_inner_caption {
	top: -125px;
}
}
#top #wrap_all .slideshow_inner_caption .avia-slideshow-button.avia-button {
    background-color: #a37652;
    color: white;
    border-radius: 10px;
}
#top #wrap_all .slideshow_inner_caption .avia-slideshow-button.avia-button:hover {
    background-color: #c79a52;
    color: white;
    border-radius: 15px;
}
/* Header Button Mobile*/
@media only screen and (max-width: 767px) {
.home .avia-fullscreen-slider .caption_bottom .slideshow_caption {
    bottom: 250px;
}
.home .slideshow_inner_caption .avia-slideshow-button.avia-button {
    background-color: #a37652;
    color: white;
    border-radius: 10px;
}
}

Vielen Dank, die Pfeile sind nun mobil auch sichtbar, aber leider nicht anklickbar – nur in der Desktopversion.

I’m just not looking through in my css anymore. I’m afraid to make it worse
Can you please help me?

/* Header mobile */
@media only screen and (max-width: 767px) {
  .responsive #top #wrap_all #header {
    position: fixed;
  }
}
@media only screen and (max-width: 767px) {
.responsive #header_main .container {
    height: 50px !important;
}
.responsive .logo a {
    vertical-align: top !important;
}
.responsive .logo img {
    max-height: 50px !important;
}
}
@media only screen and (max-width: 767px) {
.responsive #top #wrap_all .main_menu {
    top: -15px;
    height: 45px;
    left: auto;
    right: 0;
    display: block;
    position: absolute;
}
}
@media only screen and (max-width: 500px) { 
.responsive #top #wrap_all #main {
        padding-top: 50px !important;
    }
}
/* Farbe Nachrichtenversand */
h3.avia-form-success{
 color:#99a502!important;	
}
/* Text mit Foto*/
.avia_textblock p img {
	  border-radius: 100%;
	  box-shadow: rgba(255, 255, 255, 0.6) 0px 0px 4px 4px;
}
.avia_textblock img.alignleft {
  margin-right: 40px;
margin-bottom: 20px;
}
@media only screen and (max-width: 767px) { 
#hello .avia_textblock img {
	width: 50%;
}
}
/* ScrollDown Pfeil */
#top .scroll-down-link {
	color: #a47654;
}
.html_header_transparency #top #main .caption_bottom .slideshow_caption {
    padding-top: 0;
}
}
@media only screen and (max-width: 767px) { 
	#top .caption_bottom .slideshow_caption .slideshow_inner_caption {
    position: relative;
    text-align: center;
}
#top .slideshow_inner_caption .avia-slideshow-button.avia-button {
	padding: 10px 6px;
	font-size: 10px;
}
}
.html_header_transparency #top #main .caption_bottom .slideshow_caption {
    padding-top: 0;
}
}
/* SlideShow Button Desktop*/
@media only screen and (min-width: 768px) { 
#top .caption_bottom .slideshow_caption .slideshow_inner_caption {
    position: relative;
    text-align: center;
}
#top .slideshow_inner_caption .avia-slideshow-button.avia-button {
    width: 500px;
    height: 56px;
    font-size: 22px;
}
@media only screen and (min-width: 768px) { 
.slideshow_inner_caption {
	top: -125px;
}
}
/* SlideShow Button Mobil */
@media only screen and (max-width: 767px) {
.home .avia-fullscreen-slider .caption_bottom .slideshow_caption {
    bottom: 250px;
}
.home .slideshow_inner_caption .avia-slideshow-button.avia-button {
    background-color: #a37652;
    color: white;
    border-radius: 10px;
}
}
/* SocialMedia Icons*/
#top #wrap_all .av-social-link-instagram:hover a, #top #wrap_all .av-social-link-instagram a:focus {
    color: #fff;
    background-color: #c82161;
}
.page-id-691 .av-masonry .av-masonry-date {
  display: none; 
}
.avia_start_animation .avia-icon-circles-inner {
  transition: all 0.2s cubic-bezier(0.175,0.885,0.320,1.275);
}
@media only screen and (max-width: 2500px) {
  #top #header.av_header_transparency .av-main-nav > li.menu-item  {
      display: none!important;
  }
  #top #header.av_header_transparency .av-burger-menu-main {
      cursor: pointer;
      display: block!important;
  }
}
.page-id-691 #after_section_2 {
  display: none; 
}

Now I seem to have destroyed evertything.
I’m just not seeing through in the css anymore and now the desktop version is destroyed and mobile doesn’t change.

I’m frustrated

My Header meu is destroyed as well.
Can anyone help me to fix everything and to structure the css? I am lost

• This reply was modified 1 year, 11 months ago by northorie.

Thanks, this is almost it. I need the menu to be -120 only when it’s opened. The burger icon is good in place as it is, then when opened I would like the menu to be more to the top.

I think I have a lot of extra unneeded CSS code. Could you take a look and fix this for me?

.phone-info {
font-size: 30px;
}

#header_meta a, #header_meta span {
font-size:17px !important;
}

/* Sticky header on mobile */
@media only screen and (max-width: 767px) {
.responsive #top #main {
/* Margin top value should be equal to header height*/
margin-top: 130px;
}
.responsive #top #wrap_all #header {
position: fixed;
}
}

@media only screen and (max-width: 1200px) {
.av-main-nav > li.menu-item { display: none; }
.av-main-nav > li.menu-item-avia-special { display: block; }
}

.phone-info {
font-size: 18px;
}

@media only screen and (max-width: 479px) {
.responsive #top .slideshow_caption h2 {
font-size: 30px !important;
}

.responsive #top .slideshow_caption .avia-caption-content {
font-size: 8px !important;
line-height: 10px;
}

.avia-slideshow-inner, .avia-slideshow-inner li, .avia-slideshow-inner li img {
height: 20vh !important;
}
}

@media only screen and (max-width: 767px) {
#top #wrap_all #main .avia-section {
background-image: none !important;
}
}

.html_elegant-blog #top .post-entry .post-meta-infos,
.html_elegant-blog .avia-content-slider .slide-meta,
#top .news-time {
display: none;
}

html, body {
background-color: #04aef7 !important;
}

.page-id-2413 .slideshow_align_caption {
vertical-align: top;
}

@media only screen and (max-width: 767px) {
/* Add your Mobile Styles here */
.avia-slideshow li {
visibility: visible !important;
opacity: 1 !important;
}
}