Docs

[Rahul]

Let us know how it goes!

[ylpl]

Hi Again,

In regards to the topbar, is it possible to split all 4 elements (Yorba Linda Public Library, Contact Us, Library Hours, and Search Bar) into different division classes? That way I can customize each one to my liking. If so, would I be able to customize each one in the global CSS function in Customizer or would I have to create a style sheet inside my TopBar Content under Header? For example, I’m trying to eliminate the top margin at the top, eliminate the bottom margin between the search bar and menu, and have the Contact Us info and Library Hours info in different colored background containers. It seems that they are all connected to one division (X-container) so customizing each section seems difficult. I understand that I may have to switch to a Child Theme but I’m hoping I can do this with my normal X Theme.

If you can let me know, that would be great.

Thank you,

Daniel

[Rad]

Hi there,

Yes, you can always add your custom CSS to Customizer’s Custom CSS section. No need for child theme for Custom CSS.

And you can always apply your own class name to the columns that separate them,

<div class="x-column my_column_1 x-1-2 last">
...
</div>
<div class="x-column my_column_2 x-1-2 last">
...
</div>
<div class="x-column my_column_3 x-1-2 last">
...
</div>
<div class="x-column my_column_4 x-1-2 last">
...
</div>

And use those class name to style it.

Cheers!

[ylpl]

Thank you!

[Friech]

You’re more than welcome, glad we could help.

Cheers!

[ylpl]

Happy Friday!

So I broke down the three elements in my top bar into different division classes and was able to customize them a bit. How would I minimize the top margin? I’ve tried but there still seems to be some margin on top for all three top elements.

Also, what would my division class for my search bar be? I created one like I did with the top three elements but was still unable to customize the entirety of it (eliminate bottom margin, add background color, etc). For the top three, I’ve been using the style element: <span style=> and this seems to have worked. Would I use the same for my search bar? Is there another you recommend?

Once again, I appreciate all the help you guys have given me. I couldn’t have gotten this far without you.

Thanks,

Daniel

[Rad]

Hi there,

The top margin is created by your title, you can add man or mas to your title’s class, for example

<h4 class="block__title mas">Library Hours</h4>

The search bar is on the different container, and its division is different from what’s on top. But its class its ID is search-2. When it comes to ID, it should be prefixed by # instead of a dot like from class name.

Example,

#search-2 {

}

or to be more specific to top bar

.x-topbar #search-2 {

}

A complete example is this without using style attribute.

.x-topbar #search-2 {
    overflow: hidden;
    background: #000;
    padding: 20px;
}
.x-topbar #search-2 #lookfor {
   width: 100% !important;
}

Cheers!

[ylpl]

Wow! That did wonders, thank you! I ended up adjusting the search bar a tad. Is there any way to center it? Also, how would I end up making the topbar responsive? I have some old CSS I used previously from you but have since changed my topbar layout so I do not think it applies. I’m getting closer and closer to finishing up this site, in huge part thanks to you guys.

Thank you again!

Daniel

[John Ezra]

Hi there,

Thanks for updating the thread! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

form#searchform {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
}

p.choose {
    text-align: center!important;
    padding-right: 0!important;
    width:80%;
    margin-left: auto;
    margin-right: auto;
}

.x-topbar #search-2 #lookfor {
    width: 88%!important;
}

Also, what do you mean by making the topbar responsive? It seems to be responsive already. It does adjust some styling when scrolled, though. Is that what you meant?

Let us know how that goes. Hope this helps – thanks!

[ylpl]

Hi! It is responsive in a sense but my divisions (Yorba Linda Public Library, Contact Us, and Library Hours) all tend to blend together when I view it in tablet/smart phone mode. Would there be any way to fix this?

Thank you again,

Daniel

[John Ezra]

Hi Daniel,

Thanks for updating the thread! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

@media (max-width:767px) {
    .x-column.x-1-2 {
        width:100%;
    }
    .x-column.x-1-2.last .x-column.my_column_2.x-1-2.last,
    .x-column.x-1-2.last .x-column.my_column_3.x-1-2.last {
        width:48%;
    }    
}

Hope this helps – thanks!

[ylpl]

Awesome! Thank you so much!

Daniel

[Lely]

You’re welcome Daniel

Cheers!

[Author]

Posts