Docs

[ylpl]

Hi there,

My site is http://dev.ylpl.net/wordpress/

You’ll see in my topbar that I have a container split into 3 columns: Library Catalog, Calendar of Events, and Digital Library.

I’m trying to do 2 simple things and have looked into the X Support Center message board and Internet but nothing seems to work.

1. Is there any way for each column to have a hover color of blue? Currently, they are all linking to different things, which is great but I just want to make it more noticeable that they’re links.

2. Is there any way to eliminate the margin below those 3 columns so it’s sitting flush on top of my Menu? There seems to be something of a 10-15 pixel space below and my margins/padding is set to 0.

Thank you so much. I appreciate everything you guys do!

Daniel

[ylpl]

Some good news! I figured out the hover issue on my 3 column container. So I just need some assistance with the margin/padding below the container. 🙂

Thanks again,

Daniel

[Nabeel A]

Hi Daniel,

Thanks for writing in! I see there are empty <p></p> tag in your topbar content. Try removing additional spaces from the content and then add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.x-brand {
    margin-top: 0 !important;
}

Let us know how this goes!

[ylpl]

Hi there,

I can only see that tag in Inspect mode in my browser. I can’t seem to find those in my topbar content except for:
<p class=”p-info”>

Could it be related to that? There seems to be some connection when I inspect the CSS.

Another thing I noticed that affects the spacing below is what I found in my CSS code:

.x-topbar .x-social-global {
margin-top: 120px;
clear: both;
position: ;
right: 51px;
display: none;
}

I don’t think it serves a purpose on my site so when I eliminate this from my CSS, the spacing becomes even greater; therefore I’ve kept it for the time being. And I found a .social-global tag right underneath the <p></p> tag when inspecting it on my browser.

Could those two be related?

Thanks again,

Daniel

[Paul R]

Hi Daniel,

Try removing any extra spaces or next line in your topbar content.

Then add this in Custom > Edit Global CSS in the customizer.

.x-topbar p:empty {
   display:none;
}

Hope that helps.

[ylpl]

That worked perfectly! Thank you so much! 🙂

[Friech]

We’re delighted to assist you with this.

Cheers!

[Author]

Posts