Same issues. Logo still shows left justified on desktop and on mobile view, the logo is over the top button. There must be code that is working against this. Below is my entire code if you can take a look and see whats wrong. I don’t have products either, so not sure why I have all this code.
I just need to fix these things and we are done with the website.
thanks for your help

.product-sales-count {
font-size: 0.8em;
margin-top: 0;
top: -10px;
position: relative;
}

/* TEXT SHADOW FOR – Fullwidth Easy Slider – Headline: */
.avia_transform .av_slideshow_full .active-slide .avia-caption-title,
.avia_transform .av_fullscreen .active-slide .avia-caption-title
{text-shadow: 2px 2px 2px #717070;}

/* TEXT SHADOW FOR – Fullwidth Easy Slider – Caption Text: */
#top .avia-slideshow .av-slideshow-caption .avia-caption-content p {
text-shadow: 2px 2px #717070;
}

/* TEXT SHADOW FOR – ALL H1 headlines: */
.av-special-heading h1 {
text-shadow: 1px 1px #717070;
}

/* TEXT SHADOW FOR – SPECIFIC H1 headlines: */
.av-special-heading.av-nlr5x-bb365aeef7c91c871c871ed41100301d h1 {
text-shadow: 1px 1px #717070;
}

/* TEXT SHADOW FOR – subheading text: */
#top .av-subheading p {
text-shadow: 1px 1px #717070;
}

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

/* 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: 80px;
}
.responsive #top #wrap_all #header {
position: fixed;
}
}

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

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

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

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

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

span.avia-menu-text {
text-transform: uppercase;
}

.avia-section.av-minimum-height .container .content {
vertical-align: bottom;
}

.avia-section.av-minimum-height.text-bottom .container .content {
vertical-align: bottom;
}
.avia-section.av-minimum-height.text-top .container .content {
vertical-align: top;
}

.avia-button {
border: 1.5px solid !important;
}

#top .avia-button {
border-radius: 5px !important;
}

@media only screen and (max-width: 767px) {
body, body .avia-tooltip {
font-size: 20px;
}
}

@media only screen and (max-width: 767px) {
.page-id-3230 .avia-builder-el-0.av-minimum-height-100:not(.av-slideshow-section) .container {
height: 767px !important;
}
}

#main .sidebar a,
#footer a,
#socket a {
text-decoration: underline;
}
a.avia-button{
text-decoration:none!important;
}
@media only screen and (max-width: 989px){
.html_mobile_menu_tablet #top #wrap_all .av_header_transparency {
background-color: transparent;
}
.responsive #top #main {
margin-top: 0;
}
}

#top #wrap_all #socket .container {
text-align: center;
}

#top #wrap_all #socket .container {
text-align: center;
}

#top #wrap_all #socket .copyright {
display: block;
float: none;
clear: both;
text-align: center;
}

#top .content .flex_column .widget_nav_menu li {
border-top-width: 0;
border-bottom-width: 0;
}

#footer h3.widgettitle{
border:none!important;
}

@media only screen and (max-width: 769px) {
.flex_column.av-l3szqp26-162f9236fd15346c9c727f5f94b66dce {
min-height: 50vh !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: #fff !important;
}

#header:not(.av_header_transparency) #header_main {
-moz-box-shadow:0 5px 5px rgba(182, 182, 182, 0.75);
-webkit-box-shadow: 0 5px 5px rgba(182, 182, 182, 0.75);
box-shadow: 0 5px 5px rgba(182, 182, 182, 0.75);
}

#top.single-product .product_meta {
visibility: hidden;
}

.is-large.wc-block-cart .wc-block-cart-items th span {
font-size: 2em;
}

table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
font-size: 2em;
}

.wc-block-components-form .wc-block-components-text-input.is-active label, .wc-block-components-text-input.is-active label {
display: none;
}

#top div ul.product_list_widget li a {
display: block;
font-weight: bold;
font-size: 1.5em;
line-height: 1.6em !important;
}

#top .dropdown_widget ul.product_list_widget li .quantity {
color: #000000;
font-size: 1em;
}

#top .dropdown_widget .total span.woocommerce-Price-currencySymbol, #top .dropdown_widget .total {
color: #000000;
font-size: 1em;
}

div .product-sorting {
display: none;
}

@media only screen and (max-width: 767px) {
.responsive #top #main {
padding-top: 88px !important;
}
.responsive.html_header_transparency #top #main {
padding-top: 0 !important;
}
}

.page-id-432 .components-flex-item input, .page-id-433 .wc-block-components-text-input input {
padding: 8px 116px;
}

.wc-block-cart__submit-container a .wc-block-components-button__text {
color: #fff;
}

.wc-block-components-address-form-wrapper .components-base-control__label {
top: -50px;
}

.wc-block-components-address-form-wrapper .components-base-control__label {
top: -30px !important;
}

#top .av-product-class-minimal img {
border-radius: 30px !important;
}
#top .av-product-class-minimal img {
border-radius: 30px !important;
}

.select2-container–default .select2-results__option–highlighted[aria-selected], .select2-container–default .select2-results__option–highlighted[data-selected], #top .select2-results {
color: #000 !important;
}

@media only screen and (max-width: 768px) {

/* Add your Mobile Styles here */
#top #bc-custom-section div .flex_column {
width: 46% !important;
margin-left: 3% !important;
border-radius: 30px;
}
}

#top #bc-custom-section div .flex_column img {
border-radius: 30px;
}

.woocommerce-Tabs-panel ul {
list-style: disc;
margin-left: 15px;
}

.woocommerce-Tabs-panel ul, .woocommerce-product-details__short-description ul {
list-style: disc;
margin-left: 15px;
}

#menu-item-150 > a > .avia-menu-text {
color: #f19809!important;
}

#av-burger-menu-ul .menu-item-150 > a > .avia-menu-text {
color:#f19809!important;
}

#menu-item-2076 > a > .avia-menu-text {
color: #f19809!important;
}

#av-burger-menu-ul .menu-item-2076 > a > .avia-menu-text {
color:#f19809!important;
}

.avia-image-container .avia_image, .avia-image-container .avia-image-overlay-wrap {
border-radius: 30px;
}

#footer .textwidget .menu-blissfull-main-menu-container p {
margin: 0;
width: auto;
display: inline-block;
}

@media only screen and (max-width: 767px) {
.responsive .home #wrap_all #av-section-shop-category .flex_column {
width: 48%;
padding: 1%;
}
}

ul.a-unordered-list.a-vertical.a-spacing-mini li {
margin-bottom: 20px;
}

#top .price, #top .price span, #top del, #top ins {
display: inline;
text-decoration: none;
font-size: 24px;
line-height: 24px;
font-weight: 600;
}

.page-id-389 .shop_columns_3 .products .product {
width: 100%;
}

.page-id-91 .shop_columns_3 .products .product {
width: 100%;
}

h1{
text-transform: capitalize !important;
}

.template-page .entry-content-wrapper h1{
text-transform: capitalize !important;
}

a.cart_dropdown_link {
font-size: 28px !important;
}

#top a.cart_dropdown_link span[data-av_icon] {
font-size: 28px;
color: var(–enfold-header-color-color);
}

#top #header .av-main-nav #menu-item-wc-account-icon > a {
color: #f19809;
font-size: 28px;
}

/* Increase base font size on mobile devices */
@media only screen and (max-width: 767px) {
body,
p,
.entry-content {
font-size: 18px !important;
line-height: 1.6 !important;
}
}

@media only screen and (max-width: 767px) {
#top .av-special-heading .av-subheading p {
font-size: 24px
}
}

img[src*=”amazon-adsystem”] {
display: none;
}

#top .av-burger-overlay-bg {
opacity: 0.8;
background: #000;
}

——————–

div .logo {
left: 37%;
}
div.av-burger-overlay-bg {
background-color: rgba(0, 0, 0, .7);
}

#top .av-burger-overlay-bg {
opacity: 0.8;
background: #000;
}

#top .av-main-nav-wrap {
float: right;
position: relative;
z-index: 3;
padding: 0 !important;
margin: 0 0 0 15px !important;
}

.header_color.av_header_transparency .av-hamburger-inner,
.header_color.av_header_transparency .av-hamburger-inner::before,
.header_color.av_header_transparency .av-hamburger-inner::after {
background-color: #FFF !important;
}

#top .av_header_transparency .phone-info,
#top .av_header_transparency .social_bookmarks li a {
color: #FFF !important;
}

#top .av_header_glassy.av_header_transparency .avia-menu.av_menu_icon_beside {
border: none !important;
}

#top .main_menu {
width: 170px
}

#top .logo {
/*width: calc(100% – 170px);*/
width: 100%;
left: unset;
}

@media only screen and (max-width: 767px) {
#av_section_1 .container.av-section-cont-open,
.page-id-910 #av-layout-grid-1 {
padding-top: 130px !important;
}
}

#top .logo img {
left: 50%;
transform: translateX(-50%)
}

@media only screen and (min-width: 768px) and (max-width: 989px) {
.responsive.html_mobile_menu_tablet #top #wrap_all #header {
position: fixed;
}
}

@media only screen and (max-width: 767px) {
#header .social_bookmarks {
display: none !important;
}
}

#top #wrap_all #av-burger-menu-ul li {
font-size: 30px !important;
}

——————-

#av-burger-menu-ul li.av-show-submenu > a > .avia-menu-text {
color: blue;
}
#av-burger-menu-ul li.av-show-submenu > .sub-menu > li > a > .avia-menu-text {
color: #f5c526;
font-size: 20px;
line-height: 20px;
}
.html_av-submenu-hidden #av-burger-menu-ul .av-submenu-indicator:before {
color: #f5c526;
font-size: 20px;
}
#top #wrap_all #av-burger-menu-ul .menu-item-2846 {
font-size: 24px !important;
}

.html_av-overlay-full #top #wrap_all #av-burger-menu-ul li.av-show-submenu li {
line-height: 20px;
}

• This reply was modified 2 months, 2 weeks ago by bemodesign.

Nice, thanks, Mike! Works like a charm on https://tortoise-tracks.org/ — any idea why it doesn’t seem to be working on https://nlsla.org/ (when I size the browser down enough to show the mobile menu, or when I test in Chrome’s mobile emulator)? Thanks again!

I posted the whole thing you sent without reading the code through and it totally killed my mobile site layout.

I quickly dialled back the change but have now lost my social media links at the top of my mobile site.

I need specific css code (not the general outline of code you sent above) to:
– reinstate my social media icons at the top of my mobile site
– reduce the white space between the logo and the breadcrumbs trail at the page top on my mobile site
– edit the menu items in the mini menu at the top of my mobile site.

Many thanks

• This reply was modified 2 months, 3 weeks ago by JennyGr.
• This reply was modified 2 months, 3 weeks ago by JennyGr.

Hi Ismael

I’m sorry, but that didn’t help. The menu is still positioned low on the screen in mobile view and it still has this additional scroll within the menu.

Hi Ismael,

Thanks for your reply. I think point 1 got misunderstood a bit, this is not actually not related to the mobile menu but to the menu style of large screens. As you can see there is a slight top shadow on the menu bar. But the menu is limited to the with of the container. I would like that the drop-down shadow is shown to the full width of the page. Let me post an Enfold project in the private content to show what I mean.

Regarding the search icon, I have already placed a fontawesom icon in the 3rd widget to illustrate the desired position of the search icon. So I would like to find out how to actually activate the search function from that position.

The hamburger position on mobile worked out good by the way, thanks for that.

Regards
S

Thanks a lot, Mike.

It looks great now, but I have one more question.
When opening the menu on my mobile device, the text on the menu appears low on the screen.
When scrolling down a bit the menu raises to a higher position.

Is there a quick CSS fix to center the menu on the screen and eliminate the unnecessary scrolling?

Best regards
Roland