Mobile navigation

hi !

I have done some customs for the responsive menu.
But I can’t find how to change the color of “Search for products” and also how to change the text.
Also for the dropdown menu I don’t know which lines I have to change for the background of the cross (see attached the cross is gold and also the background)

Thank you

Attachments:

You must be logged in to view attached files.

Hello,

Please try this CSS, add it to Theme Settings > Custom CSS

/*text of search for product*/
.mobile-nav .searchform input[type=text] {
    color: #fff;
}
/*text of menu text by default*/
.mobile-nav ul li a {
    color: #B19D73;
}
/*text of menu text on hover*/
.mobile-nav ul li a:hover {
    text-decoration: none;
    color: #fff;
}

If the code does not work please provide amdin access.

Best Regards

It doesn’t seem to work…

Also for the dropdown menu I don’t know which lines I have to change for the background of the cross (see attached the cross is gold and also the background)

Thank you

Attachments:

You must be logged in to view attached files.

Hello,

Have you changed the colors? You did not provide that is why I gave you just code to modify as per your needs.

Please provide colors for all text types and admin access

Best Regards

Search products color should be gold : #B19D73 and how can I change the text ?
Square behind the cross should be pink : #FDE6DE

thank you

Hello,

Do you mean replacing text “search for product” for something different?

Square behind the cross should be pink : #FDE6DE

Do you mean this one: http://prntscr.com/ja0kew ?

Please try this cod CSS to change text color:

/*text of search for product*/
.mobile-nav .searchform input[type=text] {
    color: #B19D73;
}
/*text of menu text by default*/
.mobile-nav ul li a {
    color: #B19D73;
}
/*text of menu text on hover*/
.mobile-nav ul li a:hover {
    text-decoration: none;
    color: #fff;
}

Please check your admin access I cannot log in.

Best Regards

Hi!

Search product text is still white, and yes I’d like to change this text, the woocommerce won’t be active at first so we would like to use it as a regular search bar.

Yes we want to change the square you send in your screenshot. We need it to stay pink : #FDE6DE and keep the cross (to close the submenu) as it is now, gold.

“text of meny text on hover” was not needed but this line work.

Thank you,

Hello,

Please use this code for placeholder

input[type=text]::-webkit-input-placeholder {color:#B19D73;}
input[type=text]::-moz-placeholder          {color:#B19D73;}/* Firefox 19+ */
input[type=text]:-moz-placeholder           {color:#B19D73;}/* Firefox 18- */
input[type=text]:-ms-input-placeholder      {color:#B19D73;}

This is for icon to be pink

.mobile-nav ul li .up-icon{
background:#FDE6DE;
}

You can remove those CSS if you do not need it.

You can replace all theme and plugin texts via PO file in WordPress. Here is a video tutorial that should help you translate your website texts with a Loco Translate plugin https://www.youtube.com/watch?v=D3NsDdMzsls&list=PLMw6W4rAaOgKKv0oexGHzpWBg1imvrval&index=3

Best Regards

Both issues are not solved, for the placeholder and the background of the icon.
Could you try to connect and test it ?

If I want the search products to be a regular search do I have to change settings ? or just translate ?

Thank you

Hello,

Please provide the valid access.

Best Regards

Thank you

Hello,

Please replace the code for placeholder with this one:

.mobile-nav .searchform ::-webkit-input-placeholder {color:rgba(0,0,0,0.4)}
.mobile-nav .searchform ::-moz-placeholder {color:rgba(0,0,0,0.4)}/ Firefox 19+ /
.mobile-nav .searchform :-moz-placeholder {color:rgba(0,0,0,0.4)}/ Firefox 18- /
.mobile-nav .searchform :-ms-input-placeholder {color:rgba(0,0,0,0.4)}

And this one for icon and square:

.mobile-nav ul li .up-icon {
	background-color: black;
}

.mobile-nav .icon-sub-menu:after, .mobile-nav .icon-sub-menu:before {
	color: white;
}

Best Regards

Hi !

Sorry OVH severs were down friday so you were probably not able to connect on our site.
Everything works now if you want to try.

thank you

Hello,

I have added the recent code and deleted the previous one which was not workable.

Now it works.

Best Regards

Hi !

Yes the code you put works great thank you.
But the text typed by the clients in the search tool is white …

Hello,

This has been fixed. This CSS has been added:

/*text of search for product*/
.mobile-nav .searchform input[type=text] {
    color: #B19D73;
}

Best Regards

Hi!

Yes it’s working great.
How do you change the result’s square ? (see attached)

Thank you

Attachments:

You must be logged in to view attached files.

Hello,

What do you mean? On hover or on click? Now the background is always pink.

Best Regards

Hi !

When you enter your research in the search bar, results are showing underneath and the background of those results is black.
Also the search module is searching only for products could it work to search “everything” in the site.

Thank you

Hello,

What color do you want on search? Add this CSS to Theme Settings > Custom CSS

.basel-search-full-screen .basel-search-wrapper {
    background-color: rgba(0,0,0,.9);
}

Change the color as per your needs.

Woocommerce search works only with products.

Best Regards

Hello,

Thank you for your answer.

How can I disable the search function ?

Thank you

Hello,

Please add this CSS to Theme Settings > Custom CSS > Custom CSS for mobile landscape and Custom CSS for mobile

.mobile-nav #searchform{
    display:none!important;
}

Best Regards

[Author]

Posts