Prevent Search Icon from going to 2nd Line on Pages Where Sidebar Exists/ Icon Stack

Hi!

I inquired about this during a previous thread and I’m still trying to wrap my brain around it. My website is https://www.keianienterprises.com/ I was given this code

.x-navbar .desktop .x-nav>li>a>span {
padding: .875em 1.25em;
}

and I also tried this code below but neither seems to do the trick.
.x-sidebar-content-active .x-navbar .desktop .x-nav>li>a>span {
padding: .875em 1.25em;
}

I would like to have a code that works for pages where sidebars exist only so that the style of other page types is not affected.

Hi,

You can try this code instead.

.x-sidebar-content-active .x-navbar .desktop .x-nav>li>a>span {
    padding: .875em 1em;
}

Please note that you may change 1em to adjust the spacing of your menu item.

You can also change the code to make it affect certain pages.

eg. For search results page, you can change it to this.

.search-results  .x-navbar .desktop .x-nav>li>a>span {
    padding: .875em 1em;
}

Hope that helps.

Hi. Paul!

The first code did the trick. You’re one smart cookie. Thanks so much! Now the only issue on the page now is the additional white space above the page title. Is there a way I can decrease it for the pages with sidebars only? Here’s a screenshot.

Hi,

To decrease it, you can add this in Cornerstone Builder > CSS

.x-sidebar-content-active .entry-content h1 {
   margin-top:0;
}

Hope that helps.

Hi, Paul!

I don’t think this particular page was built with Cornerstone. It’s just a regular page. Would this code still apply?

Hi There,

All headings (h1 - h6) in X Theme has a default top margin regardless if the page is created in Cornerstone or not, including the page titles. Paul’s code removes the default top margin on pages title, but only on pages with active sidebar (x-sidebar-content-active).

Cheers!

Hi!

Since this is a regular page would I place the code in the edit CSS file or where exactly? I do not wish to convert it to a page that uses cornerstone. So how do I add the code without using the cornetsrone editor?

Hi again,

You can add the above code in the Theme Options > Global CSS or in the Customizer via Appearance > Customize > Custom > Edit GLOBAL CSS

Let us know how this goes!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.