I will update soon, thanks for telling me that!

About the website; the menu is still great, it’s still responsive as the screen gets smaller.

I saw you added this code:

#top.boxed, .html_boxed.html_header_sticky #header {
    max-width: 85% !important;
    width: 1010px;
}

I changed that code to:

#top.boxed, .html_boxed.html_header_sticky #header {
    max-width: 85% !important;
    width: 80%;
}

And now it works axactly like how I want it to be.

Amazing @quenni007, I’ll keep you in the credits of the website.

EDIT: I now see that both codes underneath dont work anymore; why is that .. ?

/* Content slider */
.contentsliderlettertyp {
font-size: 14px;
text-align: center;
}

/* Witte special header met schaduw */
.dropshadow .av-special-heading-tag {
text-shadow: 2px 1px 2px black !important;
color: #ffffff;
}

• This reply was modified 7 years, 9 months ago by ernaborbas.

@guenni007 I’m just very confused about it all, can I maybe send you login details so you can change the piecie of code for me? It would help ALOT ..

Because I can’t seem to find where in the website I have to delete this pieces of code – https://kriesi.at/support/topic/center-menu-responsive/#post-745323

If u agree, i will send the details to: (Email address hidden if logged out)

Thanks.

• This reply was modified 7 years, 9 months ago by ernaborbas.

Hello @Guenni007,

I had a short vacation, I can’t seem to figure out what I need to remove from the code I have on my website right now..
The code i have working now is:

.av-main-nav li:nth-child(3) {
    margin-right: 150px;
}

.responsive .main_menu ul:first-child > li > a {
    padding: 0 8px;
}

#header_main_alternate {
     border: medium none !important;
}

#header .container {
     max-width: 100%;
     padding: 0px;
}

.html_header_top.html_logo_center .logo {
     filter: drop-shadow(2px 2px 3px #888888);
     left: 50%;
     transform: translate(-50%, 20px);
}

.html_header_top.html_header_sticky.html_large.html_bottom_nav_header #main {
    padding-top: 165px !important;
}

.cart_dropdown {
    opacity: 0;
    right: 0;
    top: 0;
    transition: none !important;

}

@media only screen and (min-width: 980px) {
.responsive .main_menu ul:first-child > li > a {
    padding: 0 20px;
}
}

@media only screen and (max-width: 810px) {
  .container #advanced_menu_toggle, #advanced_menu_hide {
      display: block;
  }
.main_menu .avia-menu, #header_main_alternate, .fallback_menu {
    display: none;
}
.responsive #top #wrap_all .container {
    float: none;
    margin: 0 auto;
    max-width: 85%;
    padding-left: 0;
    padding-right: 0;
    width: 85%;
}
.responsive.html_header_top.html_logo_center .logo {
    left: 0;
    margin: 0;
    transform: translate(0%, 0px);
}
.responsive #top .cart_dropdown {
    margin: -23px 50px 0 0;
    position: absolute;
    right: 7.5%;
    top: 50%;
    opacity: 1
}

Can you help me with completing the piece of code with your new code?

You’re very helpfull allready, thanks for that!

This is the website (in the first post i placed in in private content). http://nlboos-osterwaal.savviihq.com/

As i said; I dont want to shrink the font-size. I’m searching for a other solution.

Thanks Rikard! That worked right away.
How can I make it work for ALL the pages + future pages? the code only works on the main page right now.

I’m not looking for a code like this, I dont want to make a code for every future page I create.

.page-id-212 #main {
    padding-top: 80px !important;
}

Thanks in advance.

• This reply was modified 7 years, 10 months ago by ernaborbas.