Docs

[patsorules]

Hi,

im new in this forum. So “Hi to all””

I have 3 questions for the Top or Navbars.

First:
How can I take the Search Icon on the same High/Row like the other three? (Picture 1)

Second:

If I have clicked on the search Icon there will open a kind of searchbox. Can I change the font and backround color of this?

Third:

How can I change the “Nabar menu” (or social media menu)? Picture3

Thanks a lot

Patrick from Germany

[Rupok]

Hi Patrick,

Welcome to the X community. To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[patsorules]

Hi,

the URL:
http://www.patsorules.com.

Greetz

[Rupok]

Hi there,

Thanks for writing back.

#1. You can add this under Custom > CSS in the Customizer.

.menu-item.x-menu-item.x-menu-item-search {
  margin-right: -20px;
  margin-top: -40px;
}

#2. Let’s add this to change the search background and font :

.x-searchform-overlay {
  background-color: #333;
}

.x-searchform-overlay .form-search label {
  color: #fff !important;
  font-size: 24px;
}
.x-searchform-overlay .form-search input.search-query {
  color: #fff !important;
  font-size: 30px;
}

Let’s adjust the values.

#3. Do you want to change the color of social icons or the links? You can update the links from Customize > Social.

If you want to change the color, let’s add the CSS :

.x-social-global a {
  color: #fff;
}

Hope this helps.

[patsorules]

Hey,

thanks a lot. All things work, but third. I wrote not so excellent.

Third: I want to change the position and the size. How works that?

Thanks 🙂

[Lely]

Hi There,

You’re welcome!
To adjust the size of the social icons on the Topbar, please use the following custom CSS:

.x-topbar .x-social-global a {
    font-size: 34px; /*Adjust this accordingly*/
}

Regarding the position, can you clarify what kind of adjustment? Where is it supposed to be? You can give us screenshot of what you want to achieve so we can give you more specific suggestion.

Hope this helps.

[Author]

Posts