Docs

[ylpl]

Hi there,

I’ve been tweaking my topbar to make it more streamlined at http://dev.ylpl.net/wordpress

As you can see, my social media buttons pop up in the topbar but I only want them in the footer area as they are displayed currently. Is there any way to eliminate them from just the topbar?

In addition, is there a way to split the top part of the topbar into 2 columns? Currently I have “yorba linda public library” on the left hand side but was hoping to add our contact info on the very right hand side. Is a column division even needed for this?

Lastly, is there a way to add a “Find” button to my search bar? I copied the code from Cornerstone’s Search element and pasted it in the topbar. I love how responsive it is on a mobile device and am hoping that adding a “Find” button will still maintain its responsiveness.

If you could let me know, that would be great. I appreciate all your help as always.

Thanks again,

Daniel

[Darshana]

Hi there,

Thanks for writing in! Upon checking your site, it seems that you have not enabled Topbar on your site. Topbar should be activated through Customizer -> Header area.

If you’re referring to the first section in your site URL, you should be able to manage it’s content through Cornerstone and also you can divide it into two Columns.

Let us know what you want to do.
Thanks!

[ylpl]

Hi,

I checked in Customizer and my Topbar is indeed turned on. I used some code to insert “yorba linda public library” and the search bar below that. I’m just curious if there’s a way to put contact information on the top right corner and if there’s a way to insert a submit button on my searchbar. It seems Cornerstone is only applicable to the body below my menu bar. Let me know when you get a chance.

Thanks,

Daniel

[ylpl]

Also, how would I eliminate the social media buttons from my topbar?

Thanks!

[Christopher]

Hi there,

Please update this code :

<header id="header">
  <div class="x-container">

      <h2 class="block_title man">
</h2><h2 style="margin-top:10px;">
<a rel="index" class="fn url" href="http://dev.ylpl.net/wordpress/" title="yorba linda public library">yorba linda public library</a></h2>
    </div>
</header>

To :

<header id="header">
  <div class="x-container">
<div class="x-column x-1-2 x-sm">
      <h2 class="block_title man">
</h2><h2 style="margin-top:10px;">
<a rel="index" class="fn url" href="http://dev.ylpl.net/wordpress/" title="yorba linda public library">yorba linda public library</a></h2>
</div>
<div class="x-column x-1-2 x-sm">put contact info here</div>
    </div>
</header>

In regards with search form, please check this link : http://www.textfixer.com/tutorials/html-search-box.php

Add this code in customizer :

header .x-social-global {
    display: none;
}

Hope that helps.

[ylpl]

Thanks, that definitely helped!

Would there be any way to eliminate the white space between my menu and the body of my site? Not sure if it makes a difference but I am using Uber Menu.

Also, is there a way to make my search bar flush with my menu and the rest of the body of my site? I’ve been playing around with it but the only thing it seems that I’m able to adjust is the padding.

Thank you so much again!

Daniel

[Friech]

Hi Daniel,

First, please check your entire custom CSS here: http://csslint.net/ and resolve all the errors.

After that, you can add this under Custom > CSS in the Customizer.

header + .x-section {
	padding-bottom: 0 !important;
    margin-bottom: 0;
}  
.x-topbar-inner .x-container.width {
	width: 100%;
}

Hope it helps, Cheers!

[ylpl]

Hi there,

Thanks for the suggestion but that didn’t seem to work. Any other suggestions?

Thanks,

Daniel

[Jade]

Hi there,

Please try to add this code:

.x-topbar #x-section-1 {
    padding-bottom: 0 !important;
    margin-bottom: 0;
}

[ylpl]

Thank you! That did the trick! 🙂

Now I’ve been having a little trouble maximizing the width of my search bar. When I increase the width, it seems to also increase the width of my uber menu. Maybe I forgot a </div> somewhere in there. Would there be any way to make my search box the same exact width as my uber menu and overall topbar?

Also, I was curious if I’m able to make the top right part of my x-container consistent in all formats? In desktop and tablet formats, it’s only 3 lines but once I switch over to mobile format it crunches into 6 lines. Any way to keep it the same, 3 lines, in all formats?

Thank you again for your fantastic work. I’d be lost without you guys.

Daniel

[Rupok]

Hi Daniel,

It seems you already have the below code for the search bar –

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

Let’s change the width value to change the width. It won’t affect menu.

And regarding the Topbar content, the line will be automatic based on the screen size. You can decrease teh font-size for mobile to keep it in less lines but I think you should keep this as is to keep this readable.

Cheers!

[ylpl]

Thanks but I think that only affects the search bar. I guess I’m talking about the search box that surrounds the search bar. It seems to be attached to my uber menu.

Also, I was hoping to maintain the same aspect ratio (3 lines) for my top right container. If changing the font size in mobile device viewing is required, how would I accomplish that?

Thanks again,

Daniel

[Jade]

Hi Daniel,

Please add this code:

form#searchform {
    width: 100%;
}

@media (max-width: 552px) {
    #header .x-container .x-column:last-child li {
        font-size: 11px;
    }
}

Hope this helps.

[ylpl]

Thanks! That helped solve my aspect ratio problem. Now hypothetically as I was playing around I noticed the css worked only when applying < li > in the container but if I wanted to change my container to <br> I noticed that the CSS code would not apply. To fix that, would I just change it to this instead? Or would it be something else?

@media (max-width: 552px) {
    #header .x-container .x-column:last-child br {
        font-size: 11px;
    }
}

Thanks again,

Daniel

[Paul R]

Hi Daniel,

Please change < paragraph > to < p > then add a class to your p tag.

eg.

<p class="my-info">
    18181 Imperial Highway • Yorba Linda, CA 92886 <br>
    Mon-Thurs  9 a.m. to 9 p.m. • Fri- Sat 9 a.m. to 5 p.m. • Closed Sunday <br>
     714-777-2873 • [email protected]
</p>

After that, you can add this under Custom > Edit Global CSS in the Customizer.

@media (max-width: 552px) {
    .x-topbar #header .my-info {
         font-size: 11px;
         color:white;
         text-align:center;
    }
}

Hope that helps.

[Author]

Posts