trying to setup

Hi,

Thanks for the update. Do you mean that you want your menu items spread across the container with an even space between them? If so then it’s not something I would recommend that you do, since it’s difficult to get it responsive, and the menu would likely break if you add or remove menu items.

Best regards,
Rikard

Hi,

Yes, that should be possible. Please try this CSS:

.html_header_top.html_bottom_nav_header #header_main_alternate .main_menu {
    width: auto;
    float: none;
    display: table;
    margin: 0 auto;
}

Best regards,
Rikard

Hi,

1. Please try this CSS as well:

@media only screen and (max-width: 1260px) {
#top #header .av-main-nav > li > a {
    background-color: transparent;
}
}

2. It can be tricky to get the custom button and the burger menu to get along on small screens, maybe it would be better if we removed your custom button, then you add it to the page layout instead, and hide it for all screens except small ones?

If you like that idea then you can hide the widget on small screens using this:

@media only screen and (max-width: 767px) {
#text-9 {
  display: none;
}
}

Best regards,
Rikard

Hi,

The CSS I gave you is being overridden, please try this instead:

@media only screen and (max-width: 1260px) {
#top #header .av-main-nav > li > a {
    background-color: transparent !important;
}
}

Best regards,
Rikard

Hi,

Thanks for the screenshot, but that is not what I gave you CSS for. You have elements which will be covered on both sides, what exactly to you want to remove or change? If you want to remove your widget on tablet sizes as well then you can adjust the code I sent your previously:

@media only screen and (max-width: 1024px) {
#text-9 {
  display: none;
}
}

Best regards,
Rikard

Hi,

No, we’re here to help with problems like these :-)

I can’t see the black line anymore on my end though, I checked in both regular and incognito windows. Also, how do you want to move the burger menu/your header widget so that they don’t clash? We can help you out with CSS for that, but we need to know what you would like first.

Best regards,
Rikard

Hi,

Thanks for the update. Please try this to hide the widget when the mobile menu activates, and move the burger menu to the right:

@media only screen and (max-width: 1260px) {
#text-9 {
    display: none; 
}
.html_header_top #top .av_menu_left .main_menu {
    left: auto;
    right: 0;
}
}

I’m not sure how you want it to stand out, but you can select for the menu item to show as a button under Appearance->Menus. If that is not what you are looking for then please try to explain a bit further.

Best regards,
Rikard

Hi,

You can remove this:

/* fix to eliminate the schedule button on smaller screens */

@media only screen and (max-width: 700px) {
#text-9 {
display: none;
}
}

Then replace this:

@media only screen and (max-width: 1260px) {
#top #header .av-main-nav > li > a {
background-color: transparent !important;
}
}

With this:

@media only screen and (max-width: 1260px) {
#text-9 {
    display: none; 
}
.html_header_top #top .av_menu_left .main_menu {
    left: auto;
    right: 0;
}
#top #header .av-main-nav > li > a {
    background-color: transparent !important;
}
}

Best regards,
Rikard