Hi Andy

I have created a page with a widget in a color section at the top and given it an ID of ‘mobilemenu’. The color section below has an ID of ‘conent’ for testing purposes.
http://fordtractorsales.co.uk/robs-mobile-test-page/
The widget is a copy of the Shop Overview Page sidebar so alongside a search box and a back button it has 6 Woocommerce Layered Nav widgets with the 6 Attributes. The Attributes menu does not show any content on the test page because it only shows attributes available for the category (tractor) page it is on. (e.g. http://fordtractorsales.co.uk/product-category/1000-series/2000/)
I have enabled sidebar on the page but it is showing below the content for some reason.
I have disabled the Sidebar on Smartphones In the Theme Options.

Many thanks
Rob

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 8 years, 11 months ago by ernaborbas.

I just sent you the details, hope you can help me.

Otherwise I hope the mods can help me with:
– Centering menu (logo in middle)
– Links may not fall underneath other menu links
– Keeping it sort of responsive

This code is great allready: https://kriesi.at/support/topic/center-menu-responsive/#post-743775
Only downside to that is that my page isn’t 80% wide anymore.

Thanks!

• This reply was modified 8 years, 11 months ago by ernaborbas.

Thank you.

This code was for mobile devices, I put under @media only screen and (max-width: 480px) and now work perfect in desktop and mobile.

Regards!

@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 8 years, 11 months ago by ernaborbas.

I now only added this code, what should I add next??

.container {
    width: 100%;
}
.container .av-content-small.units {
    width: 80%;
}
.responsive #top.boxed, .responsive.html_boxed.html_header_sticky #header, .responsive.html_boxed.html_header_transparency #header {
    max-width: 90%;
    width: 80%;
}
.responsive .container {
    max-width: 80%;
}
#top #header .av-main-nav > li > a {
    font-size: 15px;
}

As you can see, the width of the page is perfect now.
(http://nlboos-osterwaal.savviihq.com)
That is the width i would like to have.

Now I need the menu to be: Link – Link – Link – Logo – Link – Link – Link & The responsive part that you designed.

Thanks

• This reply was modified 8 years, 11 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!

Hi Rikard,

it’s alll right, you can close the topic, thanks.

Best Regards,
Agnes

Hi Rikard,

when a variable isn´t possible for the portfolio_item, then you can close this topic. Can I close this, where?

Thanks.
Alex