Return to previous page

XStore 5.x – Simple drop-down menu in header top now has annoying border

This topic has 8 replies, 3 voices, and was last updated 5 years, 5 months ago ago by Olga Barlow

Robert

Participant

October 31, 2018 at 17:37
I mentioned this a while ago after upgrading to XStore 5.beta…

I have two drop-down menus in Header Top Left widget area. One is a currency switcher (WooCommerce Currency Switcher) and the other is a language selector (GTranslate). Prior to XStore v5, there was no border around the dropdown menus in Header Top but now there is.

I use Google Chrome Inspect tool to see what elements are used:-
```
select, .select2.select2-container--default .select2-selection--single {
    padding: 0 2.9em 0 1em;
    cursor: pointer;
    color: #888888;
    height: 2.642rem;
    line-height: 2.642rem;
    max-width: 100%;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: start;
    position: relative;
    border: 1px solid #e1e1e1;
    background-color: transparent;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-position: calc(100% - 12px) 50%;
    background-repeat: no-repeat;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABmJLR…u/RW3CQ9L/bBRCCCGEEEIIIYQQQgghhBBCCCGEEEIIIYD/AI5xCCmGn2cGAAAAAElFTkSuQmCC);
    background-size: 10px;
}
```
How can I use custom css to apply the attribute border: none; for just the header top area and not affect the drop-down menus found elsewhere on the site, like the “Sort-by” drop-down on the Shop page.

kind regards
#202087 Copied Theme version: 5.1.1
7 Answers

Rose Tyler

Support staff

November 1, 2018 at 08:59

Hello,

Please provide us with your site URL so we can take a closer look.

Regards

#202119 Copied

Robert

Participant

November 1, 2018 at 18:15

Hello Rose

Thanks for responding. Please find login details in private content.

Please note that this is a staging site for support purposes only and uses a .htacess password. Also make sure you copy & paste login URL as supplied, as its different from usual WordPress login path.

Regards

Please, contact administrator
for this information.

#202174 Copied
Rose Tyler

Support staff

November 2, 2018 at 08:24
Hello,

Please try to use this custom css code:
```
.topbar-widget select {
    border: none;
}
```
Regards
#202186 Copied
Robert

Participant

November 2, 2018 at 12:12

Hello Rose

Thank you very much that worked!

I thought it would be something like that but couldn’t work out what went before the select part.

kind regards

#202213 Copied

Olga Barlow

Support staff

November 2, 2018 at 12:48

Hello,

You are welcome!

Regards

#202216 Copied
Robert

Participant

November 2, 2018 at 14:06
Sorry, but one more thing. In the drop-down menu is a downward pointing arrow. How do I change the colour?

It uses a background image that appears to be Base64 encoding of a PNG image:-
```
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABmJLR…u/RW3CQ9L/bBRCCCGEEEIIIYQQQgghhBBCCCGEEEIIIYD/AI5xCCmGn2cGAAAAAElFTkSuQmCC);
    background-size: 10px;
```
I don’t know how this image is generated. I don’t understand why you have used this instead of a standard non-encoded image, so we can understand how to change it ourselves. How did you get it? How do I change it to a different colour, please?

I created a new png arrow myself. This is what I have so far:-
```
.topbar-widget select {
    border: none;
	color:#fff !important;
	background-image: url(https://mydomain.com/wp-content/uploads/2018/11/arrow.png);
}

.topbar-widget option {
	color:#000 !important;
}
```
I gave the top-bar a dark background colour, so needed to change the text colour of the select options text. Thought I’d post this in case anyone else needed it.

I just want to know why 8Theme are using Base64 encoding of a PNG image? It obfuscates where the image is coming from. It’s obviously off-site and from elsewhere. Why encode it and not just have file.png? Please explain?

Regards
#202236 Copied
Olga Barlow

Support staff

November 5, 2018 at 14:53
Hello,

This image was generated by online converter to base64. We converted png to base64 because of GTmetrix. In another case, GTmetrix requires to include the arrow image to sprite.
You can use this custom if you want to use a white arrow for the select
```
.topbar-widget select {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABmJLR…5Op/NV4UghhBBCCCGEEEIIIYQQQgghhBBCCCGEECaRfwDxFRW63xAIPwAAAABJRU5ErkJggg==);
}
```
Regards
#202395 Copied
Viewing 8 results - 1 through 8 (of 8 total)

The issue related to '‘XStore 5.x – Simple drop-down menu in header top now has annoying border’' has been successfully resolved, and the topic is now closed for further responses

XStore 5.x – Simple drop-down menu in header top now has annoying border

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection