Archived topic
Search button and Mobile header
3 replies · Started by Shahab on September 13, 2022
I have added some CSS codes on my website from here forum posts, but facing issues with the mobile header and can't change the search box widget in the sidebar like this: First one
My website is here:
second one
Thank you,
P.S: I have added these CCS codes:
.inside-header {
padding:0px 40px;
}
.secondary-navigation {
position: relative;
}
.site-header
{
position: relative;
box-shadow: 8px 8px 4px 4px rgba(0,0,0,0.43);
}
.site-header {
margin-bottom: 1.5em;
}
.site-footer {
margin-top: 2em;
}
.page-header, .widget, .site-main>* {
margin-bottom: 0px;
}
#right-sidebar .widget:nth-child(3) {
background-color: #000;
}
Hi there,
1. The mobile header. you need to add Mobile Menu Label in the Customizer > Layout > Primary Nav.
And then add this CSS:
@media (max-width: 768px) {
.site-header .inside-header {
padding: 0;
}
.site-header .mobile-menu-control-wrapper {
flex: 1 0 100%;
}
.site-branding {
padding: 20px;
margin: auto;
}
.site-header .mobile-menu-control-wrapper button {
line-height: 4em;
background-color: #018a3a;
}
}2. to style your search widget try this CSS:
.widget_search .wp-block-search__inside-wrapper,
.widget_search .wp-block-search__inside-wrapper * {
display: block;
width: 100%;
margin: 10px 0;
border-radius: 4px;
border: 0;
}
.widget_search .wp-block-search__inside-wrapper input {
line-height: 1.9em;
}Thank you, David!
It worked.
Glad to hear that !
