Logo bar and navigation bar

Support
#1

Hello there!
a few months ago you had helped me to fix my navigation and logo bar to work like that


in all pages and posts.

I have just one page where it is not working, it’s all off.
this one https://www.boundlessroads.com/privacy-policy/

you can see the difference in lay out between the two pages.

can you help me to fix it?
thanks a lot
best
Isabella

#2

Hi Isabella,

Thank you for writing in, there is a jQuery (Page settings > JS) that is added to your Home page, please copy that and add to your privacy-policy page. And there is a BODY CLASS has_custom_slider on your home page that has something to do with the styling, please apply that BODY CLASS on the privacy-policy page as well.

Cheers!

#3

Hello friech! thanks a lot for this but I can’t find the page settings and the body class…

is page setting this one in the screen shot?

as for the body class I have no clue :frowning:

thanks for your help :slight_smile:

#4

Hi @isa1978,

Please edit your page in the builder, then go to JS secion like in your screenshot and add this code,

jQuery('.x-slider-container.below').prependTo('.x-logobar-inner .x-container');

It’s the same code you have on your home page.

Then in the same builder of your privacy page, click the gear icon. It should open up a pop-up and go to meta settings, then add has_custom_slider to the Body Class input field.

Thanks!

#5

Hey there! it doesn’t work
here the result in the screen shot

I have a sugestion to make things easier. I will make the header picture already made with the logo on it and we configurate the site for having no logo and the menu bar below the heder picture as it is in the homepage and that’s it. Would that require less custom coding and less troubles?

I am open to anything that would make things easier for me so that i don’t have to bother you again. whatever you suggest.

thanks a lot again
cheers

#6

Hello There,

The slider should be activated in the Above the Masthead area. Please refer to this thread: https://theme.co/apex/forum/t/navigation-bar-in-posts/29710/10 because this is where you have to base your settings.

Hope this helps.

#7

Hello @RueNel
thanks for following up. In the other pages (where it’s all good) the slider is below the masthead área.

#8

Hi There,

After further I found out that there are several invalid css characters in your site. Please remove it.

#1

#2

#3

Clear all your caches and test the page again.

Please let us know how it goes.

#9

hi thee! still not working


I also found other pages whose layout is wrong

thanks for your help
isabella

#10

Hi there,

Try adding that code to your privacy page’s custom javascript section. I don’t see it there, I can verify it through the site’s source code.

And similar to home page, you need to add has_custom_slider to your contact page Body Class again. Please check the pattern of how it’s implemented it, then copy them to any pages you prefer.

I see your pages has many different settings, above masthead and below masthead so let’s make this line

jQuery('.x-slider-container.below').prependTo('.x-logobar-inner .x-container');

to this two lines

jQuery('.x-slider-container.below').prependTo('.x-logobar-inner .x-container'); jQuery('.x-slider-container.above').prependTo('.x-logobar-inner .x-container');

To make sure it works regardless of slider placement.

Thanks!

#11

Hello there, I did insert the code as mentioned above. I am not sure why you are not seeing it. ( I saved it)
THIS IS SUPER WEIRD.
I checked and in the home page the slider is set to be below masthead , but if you see the home page it’s actually above. Why is it?
since the homepage is good, I changed the privacy setting page to below as well, but in this case this pushed the menu bar above the masthead. I need it below the masthead .

In the blog page neither above nor below is selected, but it works well. https://www.boundlessroads.com/blog/
I am totally confused.
Can you please help me understand?
thanks a lot
cheers

#12

Hello There,

Sorry if it took a while to get this resolved. I have investigated your issue and finally found out a solution. I went ahead and fixed the invalid entries in your custom css. I also fixed the privacy policy page. The issue happened in your privacy policy page all because it is using a default page template. The modifications from the previous threads only applies to a blank container page template which is why you have an issue. I simply added the necessary custom JS and CSS to the page which has already resolve your issue.

JS code added in Cornerstone

jQuery('.page .x-logobar').prependTo('.page .x-slider-container.above');

CSS code added in Cornerstone:

/* Added by X Staff for the Custom Slider in blog posts and other pages */
.has_custom_slider .x-logobar .x-container.max.width {
    width: 100%;
    max-width: 100%;
    position: relative;
}

.has_custom_slider .x-logobar .x-logobar-inner {
    padding-top: 0;
    padding-bottom: 0;
}

.has_custom_slider .x-logobar .x-brand.img {
    position: absolute;
    top: 20%;
    left: 0;
    z-index: 9999999;
    width: 100%;
    height: 100%;
}

.has_custom_slider .masthead-stacked .x-navbar .desktop .sub-menu {
    background-color: white !important;
}

/* Added by X Staff for the pages with sliders */
.page .x-slider-container.above .x-logobar .x-container.max.width {
    width: 100%;
    max-width: 100%;
    height: auto;
    position: relative;
}

.page .x-slider-container.above .x-logobar .x-logobar-inner {
    padding-top: 0;
    padding-bottom: 0;
}

.page .x-slider-container.above .x-logobar .x-logobar-inner .x-brand {
    float: none;
}

.page .x-slider-container.above .x-logobar{
    position: absolute;
    top: 20%;
    left: 0;
    z-index: 9999999;
    width: 100%;
    height: auto;
    text-align: center;
}

.page .masthead-stacked .x-navbar .desktop .sub-menu {
    background-color: white !important;
}

Please check your site now.

#13

Hey @RueNel thank you so much for your help . this is awesome- it works for privacy policy page
however I have issues also with another page

shouldn’t the code work for all pages in the same way?

sorry about that.
thanks again for your precious help.
cheers

#14

Hello There,

The codes were added in the Cornerstone’s custom css/js (http://prntscr.com/jnf79j). To make is work in the contact me page, you will need to edit the contact me page again and insert the codes.

I went ahead and edited the page already. Please check it now.

#15

nope! :frowning:

I have cleared browser cache but nothing. It’s actually the same page where I am trying to take out the page title ( see my other query)

am I doing something wrong?

#16

Hi Isabella,

Please provide us your FTP Login in Secure Note so we can check the file that has the error.

Thanks

#17

sure. I will do it in a secure note thanks

#18

Hi @isa1978,

This last one has a different issue, it has a fatal error. But before we proceed, I’ll provide a summary of what to do.

If you create a new page and wishes to behave the same as the home page, then follow this :slight_smile:

  1. Add has_custom_slider to the Body Class of that page
  2. Add the JS code provided by @RueNel to the page’s cornerstone custom javascript
  3. Add the CSS code provided by @RueNel to the page’s cornerstone custom CSS
  4. Make sure the slider is applied below masthead of that page

@RueNel Consolidated the CSS that present on your home-page, in both global and cornerstone CSS so you can apply it per page.

Back to the fatal error issue which is visible in our screenshot, would you mind switching back your PHP version to 5.6 (it’s your host’s system default version). The error says the fault is in line 14 of content-page.php but nothing there. It’s just this line <?php if ( has_post_thumbnail() ) : ?>.

Thanks!

#19

Hi there! it’s working now ! thanks a lot
cheers

#20

Hi Isabella,

Glad we could help, if you have a follow up question please create it in a new thread as this one is getting too long and hard to understand.

Cheers!

1 Like