Moving top bar items

  • Hello, I added a plugin to my top bar (Currency Converter) through Appearance -> Widgets. Twofold Shop Currently, this widget is in the 2nd row centre of the top bar. How can I to move it next to ‘My Cart’ on the very top right of the top bar?

    Also, the top bar font is white, but the font color within the currency drop down menu and the search bar is also white, so visitors can’t see what they have typed. Can I change the font color (in the drop down menu and in search bar) to another color, such as grey?

    Thank you!

Viewing 7 replies - 1 through 7 (of 7 total)

  • Can you post a link to your site so I can see what will be required to fix this for you?

    Thanks!

    Thread Starter shoptwofold

    (@shoptwofold)

    https://www.twofoldshop.com

    Thanks!

    1. I found this CSS from a different thread that seems to fix this.

    #topbar-search .form-search ::-webkit-input-placeholder {color: #0a0a28;}
#topbar-search .form-search :-moz-placeholder {color: #0a0a28;}
#topbar-search .form-search ::-moz-placeholder {color: #0a0a28; opacity: 1;}
#topbar-search .form-search :-ms-input-placeholder {color:#0a0a28;}
#topbar-search #searchsubmit {color:#0a0a28;}
#topbar-search input[type="text"] {color:#0a0a28;}

    2. I wasn’t able to get it looking exactly like you want, but I think this is better than it was. You can use this as a temporary fix until other support are able to give us a better solution.

    @media (min-width: 992px) {
.widget.widget-woocommerce-currency-switcher {
    margin-top: 0;
    display: inline-block;
}
.ctr_search {
    width: 80%;
    display: inline-block;
    float: right;
    margin-top: -42px;
 }
}

    Hopefully that’s helpful!

    Thread Starter shoptwofold

    (@shoptwofold)

    The codes helped move my search bar up and the font color, which was helpful, but the main concern is the currency converter. Can I alter the above codes to change the location and the font of the currency converter widget?

    Thanks, Kevin!

    That was my best attempt at it, but someone more skilled than me will likely be able to get it looking exactly as you want. Like I said, it’s an optional temporary fix that just looks better than it was, in my opinion.

    Ben or Hannah will eventually see the thread and their solution will surely be better than mine.

    I’ll keep messing with the CSS and try to come up with something better though.

    Thread Starter shoptwofold

    (@shoptwofold)

    I understand. As always, really appreciate your help!

    Ok,

    remove all this that kevin posted

    @media (min-width: 992px) {
.widget.widget-woocommerce-currency-switcher {
    margin-top: 0;
    display: inline-block;
}
.ctr_search {
    width: 80%;
    display: inline-block;
    float: right;
    margin-top: -42px;
 }
}

    Just add this:

    .widget.widget-woocommerce-currency-switcher {
    margin-top: 0;
}
.topbar-widget {
    color: black;
}
#topbar-search form.woocommerce-currency-switcher-form {
    width: auto;
}
#topbar .fr_search_widget {
    float: left;
    width: 50%;
}

    That will get everything into a row.
    You can’t move the currency select beside the cart unless you edit that with a child theme. They are in two different container.

    Kadence Themes

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Moving top bar items’ is closed to new replies.