[Resolved] Search bar transparency in Split theme

[David]

Copy out your current CSS to a text editor ( Just in case i missed something ) then delete it. And add this instead:

/* GeneratePress Site CSS */

/* Centre Logo */
.navigation-branding,
.site-logo.mobile-header-logo {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 200;
}

/* Nav search overlay menu and logo */

.navigation-search.nav-search-active {
    z-index: 200;
}

.navigation-search {
    width: calc(100% - 60px) !important;
}

@media (min-width: 769px) {
    .navigation-search {
        width: calc(100% - 100px) !important;
        top: 40px;
    }
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"],
a.button,
a.button:visited,
a.wp-block-button__link:not(.has-background) {
    border: 1px solid transparent;
}

button.ghost,
html input[type="button"].ghost,
input[type="reset"].ghost,
input[type="submit"].ghost,
a.button.ghost,
a.button.ghost:visited,
a.wp-block-button__link.ghost:not(.has-background) {
    background: transparent;
    color: inherit;
    border-color: inherit;
}

button.ghost:hover,
html input[type="button"].ghost:hover,
input[type="reset"].ghost:hover,
input[type="submit"].ghost:hover,
a.button.ghost:hover,
a.wp-block-button__link.ghost:not(.has-background):hover {
    background: transparent;
    color: #16B7B7;
}

.hero-buttons>* {
    margin: 10px;
}

.widget-area .widget_search {
    padding: 0;
}

#mobile-header .mobile-bar-items {
    -webkit-box-ordinal-group: 5;
    -ms-flex-order: 4;
    order: 4;
    margin-left: auto;
}

.no-sidebar .inside-article>*,
.no-sidebar #comments,
.no-sidebar .nav-links {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.no-sidebar .generate-columns-container .inside-article>* {
    max-width: none;
}

.nav-links>* {
    padding: 5px 15px;
    border-width: 1px;
    border-style: solid;
    border-color: inherit;
}

.entry-content .happyforms-flex {
    padding: 0;
}

#site-navigation {
    float: none;
    width: 100%;
}

.main-navigation:not(.slideout-navigation):not(.mobile-header-navigation) .main-nav>ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.main-navigation .menu-item-separator {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.main-navigation .menu-item-separator a {
    font-size: 0;
    background: transparent !important;
}

.slideout-navigation .menu-item-separator,
.main-navigation.toggled .menu-item-separator {
    display: none !important;
}

@media (max-width: 768px) {
    .inside-header>:not(:last-child):not(.main-navigation) {
        margin-bottom: 0;
    }
}

/* End GeneratePress Site CSS */

/* Further fixes */

@media(min-width: 768px) {
    #sticky-navigation {
        top: 41px !important;
    }

    .main-navigation:not(.slideout-navigation) .main-nav {
        width: 100%;
    }

    .inside-navigation {
        padding-left: 40px;
        padding-right: 40px;
    }

    .main-navigation:not(.is_stuck) .inside-navigation {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

#subscribe {
    padding-bottom: 0px;
}

.wp-block-columns {
    margin-bottom: 0px;
}

blockquote {
    border-left: 0px;
}

form.customize-unpreviewable {
    cursor: text !important;
}

input[type="email"] {
    width: 100%;
}

.mctb-label {
    font-family: "Noto Sans", sans-serif;
}

#mailchimp-top-bar.mctb-medium input {
    font-size: 12px;
}

input {
    font-family: "Noto Sans", sans-serif;
}

.mctb-close {
    display: none;
}

.entry-meta {
    display: none;
}

.nav-search-active+.site-logo {
    opacity: 0;
}

#disclaimer {
    padding: 50px;
}

@media(max-width: 768px) {
    #mailchimp-top-bar {
        display: none !important;
    }
}

@media(max-width: 768px) {
    .wp-block-image {
        margin-top: 20px;
    }
}

@media (min-width: 768px) {
    .hero {
        margin-left: 160px;
        margin-right: 160px;
    }
}

/* End further fixes */

[Anne]

Thank you so much!

The search bar looks great in the smaller, sticky navbar but is cutting the logo in half in the full navbar version, see screenshot. Is there a way to have the search bar cover everything in both modes?

My old CSS just in case that’s helpful: https://pastebin.com/z5iiPsjR

[David]

I made a slight change to the CSS above – hopefully that one does the trick 🙂

[Anne]

Woohoo, it’s perfect! Thanks so much!

[David]

Awesome – glad we got there 🙂

[Author]

Posts