Docs

[ylpl]

Hi there,

My name is Daniel and I’m the Librarian in charge of designing our new library website at http://dev.ylpl.net/wordpress

I have a few questions regarding the top bar and search box and was hoping you can help me out.

1. Is there any way to have a fixed top bar? I’ve searched the forum and it does look like there is a solution but it seems specific to each individual’s WordPress site.

2. Is there any way to have my social media button nestled between my search box and navbar? With my previous search box, eliminating the padding did the trick but with this one it doesn’t seem to work.

3. Is there any way to make my search box more compact? In other words, eliminate the spacing between the search bar and the radio buttons below. Any way to make the search bar a tad longer?

I appreciate all the help you guys haven given me already.

Thanks!

Daniel

[Lely]

Hi Daniel,

1.) Please add this CSS

.x-topbar {
    position: fixed;
    width: 90%;
    top: 0;
    height: auto;
    background-color: #ffffff;
    z-index: 1030;
    max-width: 1200px;
}
.x-navbar.x-navbar-fixed-top{
    margin-top: 167px !important;
}

2.)

.x-topbar .x-social-global {
    margin-top: 107px;
    clear: both;
    position: absolute;
    right: 61px;
}

3.)

ul.choose {
    margin-bottom: 0 !important;
}

Please apply all CSS code first before checking.

Hope this helps.

[ylpl]

Hi,

Everything is fixed position, and the social media buttons are spaced between the catalog and navbar, which is great. Unfortunately though, my navbar is now covering the slider and it’s also centered instead of aligned on the left as before. It also doesn’t display very well on tablet and smart phone platforms. Is there any way to correct this?

Thank you again,

Daniel

[Rad]

Hi Daniel,

Do you wish to apply fixed positioning on mobile’s navbar too? But we recommend not too. You have a longer menu in which you couldn’t reach when in mobile as it’s moving as you scroll too.

As for the desktop, and since your wish to fixed position all masthead element, then why not just make the masthead container in fixed position instead of one by one. Please replace all the above CSS with this,

@media ( min-width: 980px ) { //Let's make sure it wont affect mobile view
.masthead {
position: fixed;
width: 100%;
top:0;
}
.site {
padding-top: 263px;
}
}

Then go to your customizer’s setting and change your navbar positioning to static instead of fixed. It’s because that CSS should do it as a whole, not just the menu.

Then let us know for further checking.

Thanks!

[ylpl]

Hi,

No, I would only like the navbar/topbar fixed on desktop and allow it to scroll in mobile/tablet form. Unfortunately, the CSS didn’t quite work as the topbar disappears when scrolling but I did somewhat arrange how I wanted my navbar/topbar to look aesthetically.

Would there another way to keep everything fixed at the top when scrolling in desktop form? This also include keeping the nabar fixed on the left. As of now, it remains fixed but for some reason centers when scrolling.

Also, in mobile form or when the screen shrinks, the navbar ends up covering the slider and my social media buttons don’t seem to be responsive either. Any way to correct this?

Thank you again for your help. I really appreciate it!

Daniel

[Paul R]

Hi Daniel,

Please try this instead

Add this in Appearance > Customize > Custom > Edit Global Javascript

jQuery( function($) {    
    	$(window).on("scroll", function () {    
		if($('.x-navbar').hasClass('x-navbar-fixed-top')) {
			$('.x-topbar').addClass('x-topbar-fixed-top');
                }else {
                        $('.x-topbar').removeClass('x-topbar-fixed-top');
                }   
	}).scroll();
});

Then add this in Appearance > Customize > Custom > Edit Global CSS

@media ( min-width: 980px )
.x-topbar.x-topbar-fixed-top {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 9999;
}

.x-navbar.x-navbar-fixed-top {
    top:187px;
}
}

Hope that helps.

[ylpl]

Unfortunately, it did not work. I applied the changes in Customize and when that didn’t fix it I thought I’d just try the changes in Cornerstone->Settings->Custom CSS and Custom JS and that didn’t work either. I do have my Slider Settings set in “Below Masthead.” I’m not sure if that makes a difference. Any other recommendations?

Thank you,

Daniel

[John Ezra]

Hi there,

Thanks for updating the thread! Something may be conflicting. Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[ylpl]

This reply has been marked as private.

[Paul R]

Hi Daniel,

You need to set your navbar position to fixed top in Appearance > Customize > Header for the code to work.

http://screencast.com/t/Viol3fXzQ9q

Hope that helps.

[ylpl]

Unfortunately that didn’t work. The top bar still is not fixed and though the navbar is fixed it remains stuck in the middle of the page. I attached a screenshot of it when my page is scrolled about half way down.

Thanks,

Daniel

[Nabeel A]

Hey Daniel,

To fix this, just add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.x-navbar.x-navbar-fixed-top {
    top: 0 !important;
}

Let us know how this goes!

[ylpl]

Thank you, that did make it fixed but it is still not responsive in mobile/tablet formats. It overlaps the slider. However, I now know my FTP credential. If I were to give you that, my username, and password, would there be any way to check out what’s going on inside? Or is there any way to resolve the issue without going inside?

Thanks,

Daniel

[Paul R]

Hi Daniel,

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

@media (max-width: 979px) {
body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: 81px;
}

body .x-navbar {
   width:100%;
}
}

Hope that helps.

[ylpl]

Thanks, that seemed to do the trick for both tablet and smart phone formats. However, the social media buttons seem to float out of place in those formats. Any way to fix that? And is there a way to keep the topbar fixed?

Thank you so much again!

Daniel

[Author]

Posts