Site logo

[Resolved] drop-down search bar

Home › Forums › Support › [Resolved] drop-down search bar

Popular Articles

Missing style.css

Updating errors

Installing GP Premium

Installing GeneratePress

How to add CSS

How to add PHP

Home › Forums › Support › drop-down search bar

Viewing 13 posts - 46 through 58 (of 58 total)
1 2 3 4
  • Author
    Posts
  • November 9, 2022 at 7:03 am #2408126
    francesco

    sorry for the reopening of the post, but I noticed this problem. i checked the css but i can’t find the problem.

    .masonry-load-more {
    text-align: center;
}

@media (min-width: 769px) {
.inside-navigation.grid-container {
    width: fit-content;
}
form.search-form.navigation-search.nav-search-active {
    top: 45px;
	  width: 50%;
	  left: 75%;
transform: translateX(-50%);
}

@media (max-width: 768px) {
    form.search-form.navigation-search.nav-search-active {
    display: flex;
}

button.nav-search-button {
    margin-right: 56px;
    border: none;
}
}

.navigation-search.nav-search-active {
    display: flex;
}

.inside-navigation.grid-container form.search-form .search-field {
    background-color: #fff;
}

.inside-navigation.grid-container form.search-form {
    background-color: #dcf7f5;
    padding: 10px;
    display: flex;
    align-items: center;
    }
	
}

@media (max-width: 768px) {
    form.search-form.navigation-search.nav-search-active {
    display: flex;
}

button.nav-search-button {
    margin-right: 56px;
    border: none;
}
}

.navigation-search {
    z-index: 9999;
}

.navigation-search input[type="search"], 
.navigation-search input[type="search"]:active, 
.navigation-search input[type="search"]:focus {
    background-color: #fff;
}

/* After Post Social Share Design by technicaltricks.info*/

.technicaltricks-social-wrapper {
    margin: 30px 0;
    font-size: 0;
}

.technicaltricks-social-wrapper span {
    font-weight: bold;
    padding-right: 10px;
    font-size: 16px;
}

.technicaltricks-social-sharing {
    font-size: 17px;
    padding: 7px 20px;
}

@media only screen and (max-width: 600px) {
    .technicaltricks-social-sharing {
        font-size: 17px;
        padding: 6px 17px;
        display: inline-block;
    }
	.technicaltricks-social-wrapper {
    margin: 30px 0px;
    font-size: 0;
}

}

.technicaltricks-social-sharing svg {
    position: relative;
    top: 0.15em;
    display: inline-block;
}

.technicaltricks-social-sharing:first-of-type {
    border-radius: 100px 0 0 100px;
}

.technicaltricks-social-sharing:last-of-type {
    border-radius: 0 100px 100px 0;
}

.technicaltricks-social-facebook {
    fill: #fff;
    background-color: rgba(59, 89, 152, 1);

}

.technicaltricks-social-facebook:hover {
    background-color: rgba(59, 89, 152, .8);
}

.technicaltricks-social-twitter {
    fill: #fff;
    background-color: rgba(29, 161, 242, 1);
}

.technicaltricks-social-twitter:hover {
    background-color: rgba(29, 161, 242, .8);
}

.technicaltricks-social-pinterest {
    fill: #fff;
    background-color: rgba(189, 8, 28, 1);
}

.technicaltricks-social-pinterest:hover {
    background-color: rgba(189, 8, 28, .8);
}

.technicaltricks-social-linkedin {
    fill: #fff;
    background-color: rgba(0, 119, 181, 1);
}

.technicaltricks-social-linkedin:hover {
    background-color: rgba(0, 119, 181, .8);
}

.technicaltricks-social-whatsapp {
    fill: #fff;
    background-color: rgba(37, 211, 102, 1);
}

.technicaltricks-social-whatsapp:hover {
    background-color: rgba(37, 211, 102, .8);
}

.technicaltricks-social-reddit {
    fill: #fff;
    background-color: rgba(255, 87, 0, 1);
}

.technicaltricks-social-reddit:hover {
    background-color: rgba(255, 87, 0, .8);
}

.wp-block-latest-posts.wp-block-latest-posts__list li {
    padding-bottom: 15px;
    border-bottom: 1px solid rgb(38, 42, 130);
}

.main-nav > ul li ul.sub-menu li.menu-item:hover > a {
    background-color: #8ad6c1;
    color: #262a82;
}

.generate-back-to-top,
.generate-back-to-top:visited {
    bottom: 70px; /* 50px from the bottom of your screen */
}

@media(min-width: 769px) and (pointer: fine) {

    .paging-navigation p a:hover,
    .wp-block-latest-posts.wp-block-latest-posts__list li a:hover,
    .generate-columns-container article.post:hover h2 {
        text-decoration: underline;
    }

}

.border-hover:not(:hover) h2 {
    border-color: transparent !important;
}

@media(min-width: 769px) {
    .main-navigation ul.menu > li > ul {
        width: unset;
        left: 0 !important;
        right: 0;
    }
}
    November 9, 2022 at 7:27 am #2408162
    David
    Staff
    Customer Support

    Can you explains what the problem is ?

    November 9, 2022 at 9:38 am #2408612
    francesco

    As you can see from the image there is a blue border in the search button.

    November 9, 2022 at 10:44 am #2408700
    Ying
    Staff
    Customer Support

    Change this:

    button.nav-search-button {
    margin-right: 56px;
    border: none;
}

    to 

    button.nav-search-button {
    margin-right: 45px;
    border: none;
}

    Please be noted, there’re duplicated CSS codes, make sure you remove the duplicated ones.

    November 9, 2022 at 10:54 am #2408720
    francesco

    Sorry ying, what would be the duplicate CSS codes?

    this?

    @media (max-width: 768px) {
    form.search-form.navigation-search.nav-search-active {
    display: flex;
}

button.nav-search-button {
    margin-right: 56px;
    border: none;
}
}
    November 9, 2022 at 1:36 pm #2408859
    Ying
    Staff
    Customer Support

    In the CSS you attached here:
    https://generatepress.com/forums/topic/drop-down-search-bar/page/4/#post-2408126

    This CSS appeared twice, you should only keep one of them.

    @media (max-width: 768px) {
    form.search-form.navigation-search.nav-search-active {
    display: flex;
}

button.nav-search-button {
    margin-right: 56px;
    border: none;
}
}
    November 10, 2022 at 1:06 am #2409389
    francesco

    OK yes. I believe it is correct now.

    .masonry-load-more {
    text-align: center;
}

@media (min-width: 769px) {
.inside-navigation.grid-container {
    width: fit-content;
}
form.search-form.navigation-search.nav-search-active {
    top: 45px;
	  width: 50%;
	  left: 75%;
transform: translateX(-50%);
}

.navigation-search.nav-search-active {
    display: flex;
}

.inside-navigation.grid-container form.search-form .search-field {
    background-color: #fff;
}

.inside-navigation.grid-container form.search-form {
    background-color: #dcf7f5;
    padding: 10px;
    display: flex;
    align-items: center;
    }
	
}

@media (max-width: 768px) {
    form.search-form.navigation-search.nav-search-active {
    display: flex;
}

button.nav-search-button {
    margin-right: 45px;
    border: none;
}
}

.navigation-search {
    z-index: 9999;
}

.navigation-search input[type="search"], 
.navigation-search input[type="search"]:active, 
.navigation-search input[type="search"]:focus {
    background-color: #fff;
}

/* After Post Social Share Design by technicaltricks.info*/

.technicaltricks-social-wrapper {
    margin: 30px 0;
    font-size: 0;
}

.technicaltricks-social-wrapper span {
    font-weight: bold;
    padding-right: 10px;
    font-size: 16px;
}

.technicaltricks-social-sharing {
    font-size: 17px;
    padding: 7px 20px;
}

@media only screen and (max-width: 600px) {
    .technicaltricks-social-sharing {
        font-size: 17px;
        padding: 6px 17px;
        display: inline-block;
    }
	.technicaltricks-social-wrapper {
    margin: 30px 0px;
    font-size: 0;
}

}

.technicaltricks-social-sharing svg {
    position: relative;
    top: 0.15em;
    display: inline-block;
}

.technicaltricks-social-sharing:first-of-type {
    border-radius: 100px 0 0 100px;
}

.technicaltricks-social-sharing:last-of-type {
    border-radius: 0 100px 100px 0;
}

.technicaltricks-social-facebook {
    fill: #fff;
    background-color: rgba(59, 89, 152, 1);

}

.technicaltricks-social-facebook:hover {
    background-color: rgba(59, 89, 152, .8);
}

.technicaltricks-social-twitter {
    fill: #fff;
    background-color: rgba(29, 161, 242, 1);
}

.technicaltricks-social-twitter:hover {
    background-color: rgba(29, 161, 242, .8);
}

.technicaltricks-social-pinterest {
    fill: #fff;
    background-color: rgba(189, 8, 28, 1);
}

.technicaltricks-social-pinterest:hover {
    background-color: rgba(189, 8, 28, .8);
}

.technicaltricks-social-linkedin {
    fill: #fff;
    background-color: rgba(0, 119, 181, 1);
}

.technicaltricks-social-linkedin:hover {
    background-color: rgba(0, 119, 181, .8);
}

.technicaltricks-social-whatsapp {
    fill: #fff;
    background-color: rgba(37, 211, 102, 1);
}

.technicaltricks-social-whatsapp:hover {
    background-color: rgba(37, 211, 102, .8);
}

.technicaltricks-social-reddit {
    fill: #fff;
    background-color: rgba(255, 87, 0, 1);
}

.technicaltricks-social-reddit:hover {
    background-color: rgba(255, 87, 0, .8);
}

.wp-block-latest-posts.wp-block-latest-posts__list li {
    padding-bottom: 15px;
    border-bottom: 1px solid rgb(38, 42, 130);
}

.main-nav > ul li ul.sub-menu li.menu-item:hover > a {
    background-color: #8ad6c1;
    color: #262a82;
}

.generate-back-to-top,
.generate-back-to-top:visited {
    bottom: 70px; /* 50px from the bottom of your screen */
}

@media(min-width: 769px) and (pointer: fine) {

    .paging-navigation p a:hover,
    .wp-block-latest-posts.wp-block-latest-posts__list li a:hover,
    .generate-columns-container article.post:hover h2 {
        text-decoration: underline;
    }

}

.border-hover:not(:hover) h2 {
    border-color: transparent !important;
}

@media(min-width: 769px) {
    .main-navigation ul.menu > li > ul {
        width: unset;
        left: 0 !important;
        right: 0;
    }
}
    November 10, 2022 at 9:43 am #2410221
    francesco

    I noticed something else. on mobile the “X key” to close the search bar does not seem to work.

    November 10, 2022 at 10:02 am #2410259
    Ying
    Staff
    Customer Support

    Hum…Can you try this:
    1. Remove this line margin-right: 56px; from the below CSS:

    button.nav-search-button {
    margin-right: 56px;
    border: none;
}

    2. Add this CSS:

    @media (max-width: 768px) {
    .menu-bar-items {
        z-index: 2;
        position: relative;
    }
    form.search-form.navigation-search.nav-search-active {
        max-width: calc(100% - 46px);
    }
}
    November 10, 2022 at 11:59 am #2410382
    francesco

    correct?

    If I may ask, why is CSS needed to solve this problem?

    button.nav-search-button {
    border: none;
}
}

@media (max-width: 768px) {
    .menu-bar-items {
        z-index: 2;
        position: relative;
    }
    form.search-form.navigation-search.nav-search-active {
        max-width: calc(100% - 46px);
    }
}
    November 10, 2022 at 12:03 pm #2410388
    Ying
    Staff
    Customer Support

    Correct.

    If I may ask, why is CSS needed to solve this problem?

    Because it’s a custom designed search bar.

    November 10, 2022 at 3:17 pm #2410563
    francesco

    I also wanted to ask you, I removed this CSS because it is completely useless or am I wrong?

    .main-nav > ul li ul.sub-menu li.menu-item:hover > a {
    background-color: #8ad6c1;
    color: #262a82;
}
    November 10, 2022 at 6:59 pm #2410676
    Fernando
    Customer Support

    It’s alright to remove that. This code alters the background color and text color of the submenu items on hover. Moreover, these colors can also be altered through Appearance > Customize > Colors > Primary Navigation, thus you shouldn’t need that.

  • Author
    Posts
Viewing 13 posts - 46 through 58 (of 58 total)
1 2 3 4
  • You must be logged in to reply to this topic.

Start building better websites today.

Get Started
GeneratePress

GeneratePress

Solutions

Support

© 2026 GeneratePress LLC. GeneratePress® is a registered trademark.