Return to previous page

Editing Top Bar - by zf - on WordPress WooCommerce support

This topic has 16 replies, 3 voices, and was last updated 9 years, 9 months ago ago by Eva Kemp

zf

Participant

February 13, 2015 at 13:12

Hello,

I would like to do the ffg to the top bar if possible.

1) Change Black to a shade of my choice (I’ve been through the css, but cannot find option)
2) Change EN | FR | GE (plus my additional languages) to flags instead of the text variants
3) Move all of those items to the right hand side (inline with body (text) area
4) Add search bar into that area

Hope i am clear in my request.

Thank you guys..

#41927 Copied

15 Answers

zf

Participant

February 13, 2015 at 13:28

Hello,

Iv managed to change the colour of the bar. It’s just the balance..

Thanks

#41937 Copied

zf

Participant

February 13, 2015 at 13:44

Hi, iv also got the alignment sorted by editing style.css on line 1150 float:right
🙂

}
.languages-area {
float: right;
height: 27px;

I would just need to remove currency and replace wording with flags

Thanks Again

#41944 Copied
Robert Hall

Support staff

February 13, 2015 at 13:53
Hello,

Try to add this code into custom.css file.
```
.languages-area{
display:none;
}
```
Here is a video tutorial how to create custom.css: https://www.youtube.com/watch?v=Qok2zRedRMY&feature=youtu.be.

Regards,
Robert Hall.
#41946 Copied
Eva Kemp

Support staff

February 13, 2015 at 13:57

Hello,

We don’t recommend to edit original theme files.
You’d better create child theme or write style modifications in the file custom.css.
How to create custom.css you can watch in this tutorial (it’s for Legenda theme but the process is the same).

If you’re going to create multilingual site you need use WPML plugin http://wpml.org/ and you’ll be able to replace current languages with the flags adding wpml widget in “Place in header top bar” area in Appearance > Widgets.

Thank you.
Regards,
Eva Kemp.

#41948 Copied

zf

Participant

February 16, 2015 at 08:30

Hi Guys, excellent – thanks for all the help so far..

Just one more thing would it be possible to move the default header upto the top next to the last flag ? Iv attached a screenshot.

http://prntscr.com/65q1sp

Thanks

#42492 Copied

zf

Participant

February 16, 2015 at 08:41

Alternatively, would it be possible to edit the 8Theme – Search form to fit into the header bar?
I have attached a screen-shot in the link below

I would need the size of the search form compressed in order to fit

http://prntscr.com/65q401

Thans

#42493 Copied

Eva Kemp

Support staff

February 16, 2015 at 11:11

Hello,

Please provide us with the link to your site.

Thank you.
Regards,
Eva Kemp.

#42544 Copied

zf

Participant

February 16, 2015 at 12:06

Hi Eva, im currently working on a local environment.

Thanks

#42563 Copied

Eva Kemp

Support staff

February 16, 2015 at 14:08

Hello,

Sorry, but we need to see your site to be able to provide you with the correct code.
Could you please upload it to any web host?

Thank you.
Regards,
Eva Kemp.

#42608 Copied

zf

Participant

February 17, 2015 at 14:37

Hi Eva, i have uploaded the site to a live server.
Details in Private content.

I would need to add the 8theme search into that bar aswell. All Inline.

Thanks

Please, contact administrator
for this information.

#42979 Copied
Eva Kemp

Support staff

February 18, 2015 at 10:54
Hello,

You can increase the height of the languages area to have flags located inside of it, add this code in style.css of the child theme:
```
.languages-area {
   height: 40px !important;
}
```
As I see search form is opened in pop up window.
Sorry but there is no possibility to move it to the top bar. You can use other header type where search icon is placed at the top.

Thank you.
Regards,
Eva Kemp.
#43262 Copied
zf

Participant

February 18, 2015 at 13:27

Hi Eva, iv managed to put the search bar and langauges into the container… 🙂
I Just need to align them.

Please advise.

Thanks again for the excellent service.

#43303 Copied
Eva Kemp

Support staff

February 18, 2015 at 16:48
Hello,

I’ve added this code in style.css of the child theme:
```
#lang_sel_list {
    right: 200px;
    bottom: 60px;
}
.etheme_widget_search {
    display: inline;
}
```
Please check top bar now.

Regards,
Eva Kemp.
#43426 Copied
zf

Participant

February 19, 2015 at 22:53

Excellent, all working.

Thanks Eva.

#43865 Copied

Eva Kemp

Support staff

February 20, 2015 at 00:34

Hello,

You’re welcome.

Regards,
Eva Kemp.

#43902 Copied
Tagged: customize, design, editing, themes, top bar, woocommerce, wordpress
Viewing 16 results - 1 through 16 (of 16 total)