Mobile view top bar appears over logo

Hi cuthza. Can you post a link to your site? Thanks.

Sure it is subedit.co.za

The theme is responsive by default and will adjust the header as needed. This code in your child theme style.css file is overriding the theme CSS:

/* Other */

	.full-width #nav-topbar.nav-container {
   		position: absolute;
}

Thanks, I did that on purpose because I didn’t want the top navigation to follow when you scrolled down, but no matter what I do, on mobile it does not apear correctly.

If you’re trying to override the theme css that sets the topbar position as “fixed”, try this:

/* set topbar to scroll instead of fixed */
.full-width #nav-topbar.nav-container {
    position: initial;
}
.full-width.topbar-enabled #header {
    padding-top: 0;
}

This appears to have fixed the mobile theme nicely, thank you. Problem is that the search box on the mobile theme now obscures the header. Is there any work around for this?

Give this a try:

/* move search box to navigation bar */
.search-expand {
    right: 55px;
    left: auto;
    top: -50px;
    width: 320px;
}
.search-expand-inner {
    padding: 5px;
}
@media only screen and (max-width: 719px) {
    .search-expand {
        left: 55px;
        right: auto;
        top: 0;
        width: 320px;
    }
}

That works amazingly for the full site, but mobile I’m still getting the following anomaly:

https://uploadpie.com/dglf7

Adding the !important rule on the positional properties should fix it:

@media only screen and (max-width: 719px) {
    .search-expand {
        left: 55px !important;
        right: auto;
        top: 0 !important;
        width: 320px;
    }
}

Fantastic! I really need to up my CSS game, I find it fascinating.

You have been extremely helpful, I really appreciate it.

Glad it’s working. If you don’t need any further assistance with this topic please mark it as Resolved. Thanks.