Show Secondary Menu in Header on Mobile

Hey navindesigns,

Thank you for the link to your site, to put the two links between the logo and burger menu try this css:

@media screen and (max-width: 767px) {
#top #header #header_main #text-3.widget {
    position: absolute;
    left: 80px;
    right: 0;
    top: -3px;
}
#top #header #header_main .homeHeaderContact {
    gap: 5px;
}
#top #header #header_main .headerMenu li:first-of-type {
    padding-right: 5px !important;
}
#top #text-3.widget ul.homeHeaderContact {
    width: 90%;
    float: right;
    margin: auto;
}
}

while this looks ok for larger mobile (425px) it’s not good for smaller mobiles like iPhones, but you have the empty blue area why not use it and allow your social icons to show:

@media screen and (max-width: 767px) {
#top #header #header_meta {
    background-color: transparent;
}
#top #header #header_main #text-3.widget {
    position: absolute;
    left: 0;
    right: 0;
    top: -44px;
}

#top #header #header_main .headerMenu li:first-of-type {
    padding-right: 8px !important;
}
#top #text-3.widget ul.homeHeaderContact {
    width: 100%;
    justify-content: center;
}
}

try each of these add see which you like best, after applying the css, please clear your browser cache.

Best regards,
Mike

Hi,
Thanks for the feedback, try adding this css:

@media only screen and (max-width: 767px) {
.responsive #top #wrap_all .main_menu {
    z-index: 1010;
}
.headerMenuItem a {
	font-size: 12px;
}
.responsive #top #wrap_all #header_meta .social_bookmarks li a {
    color: #fff;
}
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike