Helio there!
could you please help me to bring the navigation bar below the picture of the hender in the post?
and also to have the sub-menu plain white instead of transparent?
thanks a lot
regards
Hi There,
I’ve changed your slider option to Below Masthead:
After that add this custom CSS:
.home .masthead.masthead-stacked {
position:absolute;
width: 100%;
}
.home .x-navbar {
background: transparent;
border: none;
box-shadow: none;
}
.home .x-navbar.x-navbar-fixed-top {
background: rgba(255, 255, 255, 0.55);
}
```
Can you please take a look?
Regards!hi there! it didm’t work, neither for the submenu nor for the menú which is up top.
where did you change the slider option for the post? shouldn’t it be above mashead? since I want the menú bar below that?
thanks for your help
Hey @isa1978,
To move the navbar below your slider in a single post page, add this code in Theme Options > JS.
jQuery('.single-post .x-navbar-wrap').insertAfter('.custom-slider');
Just note that, this is not something that is built out of the box with X. Issues that would arise from the use of the code should be handled by a third party developer.
For the sub-menu, you have this code in your custom CSS.
body .masthead-stacked .x-navbar .desktop .sub-menu {
background: rgba(255,255,255, 0.5) !important;
}
Change it to this:
body .masthead-stacked .x-navbar .desktop .sub-menu {
background: white !important;
}
Hope that helps.
OMG!
GUYS
I have a big issue here! I fix one thing and I have something else that is not working
now with your instruction I moved down the navigation bar but also the logo bar is overlapping it.
beside if i load the code for the sub menú bar to become white it’s not working anymore.
I am really going crazy here. I have been chatting with you for 3 days now and I keep having issues. I am even told that I have to upgrade to pro in order to fix it. But it is just a simple thing.
here I am including the screen shot with how I want to have the logo bar and menú bar positioned in all post and pages. 
I think one of the problem is the I speak to different people of your team. Can one person help me out once and for all so that we are all on the same page? pleaseeee
Hey Isabella,
Thanks for updating. We apologized if your issues wasn’t resolved immediately. I want to ask you what exactly do you want to do with your header. Do you want to have a custom header single posts only? How would the logo look like along with your slider. Maybe you can give us any clarifications for your issue so that we can respond to you clearly as well.
Points to remember:
If you want to have your logo on top of the slider layer, please edit your slider and add a global layer so that the logo will be place within the slider without using any custom css. We can then make use of the custom css that will hide/show a small logo on the left side of the menu when you scroll in the single blog posts.
If you reply in the next 4 hours, I might still be the one to respond to this ticket again. I am looking forward for the resolution of your issue.
Thanks.
Hello there
I have already explained what I need in my previous posts with an example, this is why my frustration.
I will try again.
It is very simple indeed.
I want the logo bar as it is now in the middle upper side of the header picture.
the menu bar needs to be white and below the header picture and white submenu.
this layout would be the same in all posts and pages.
here is an example (which I have already given)
Now the logo should be ok. what I need is to fix the navigation bar which is now on top and needs to go at the bottom of the picture (see screen shot) and the submenu are not working anymore.
I hope it is now clear and that you can help me
thanks a lot
isabella
Hey Isabella,
I have logged in and made some necessary changes in your site. I have discarded most of your changes and started anew.
-
I edited your Blog page and disabled the slider on the page.
-
I modified the custom code in your functions.php file and use this code instead:
// Add a custom slider to selected pages
// =============================================================================
function custom_banner() {
$navbar_position = x_get_navbar_positioning();
if( is_home() || is_archive() || is_single() || is_search() && $navbar_position == 'static-top' ) : ?>
<div class="x-container custom-slider" style="clear: both;">
<?php echo do_shortcode('[rev_slider alias="post"]'); ?>
</div>
<?php endif;
}
add_action('x_before_view_global__brand','custom_banner', 30);
// =============================================================================
// Add custom slider class
// =============================================================================
function add_has_custom_slider_class( $classes ) {
$navbar_position = x_get_navbar_positioning();
// Adds a class of has_custom_slider to the body class
if ( is_home() || is_archive() || is_single() || is_search() && $navbar_position == 'static-top' ) {
$classes[] = 'has_custom_slider';
}
return $classes;
}
add_filter( 'body_class', 'add_has_custom_slider_class' );
// =============================================================================
- I also added a custom css and use this:
/* 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;
}
Base on the code above, it will only affect the blog index, archive pages, single blog post and search page. We can fix the slider, logo and menu in your pages later one. We just have to start with blog index, archive pages, single blog post and search page to avoid any conflicts with static pages.
Please check your blog index and single blog posts now if this would work for you.
Hello RUe
thanks for that but I am still seeing issue. I have opened the site with an incógnito window to be sure .
And I have found 3 different set up . I am sending here the screen shot.
The one with the logo in the middle of the picture is the correct one. is it possible to have all the pages and posts with the same lay out like this one?
thanks a lot
regards
. 
Hey There,
To resolve the remaining issues in your pages, please do the following:
- Please insert this custom JS code:
// Added by X Staff for the pages with sliders
jQuery('.page-template .x-logobar').prependTo('.page-template .x-slider-container.above');
- And then use this custom css:
/* Added by X Staff for the pages with sliders */
.page-template .x-slider-container.above .x-logobar .x-container.max.width {
width: 100%;
max-width: 100%;
height: auto;
position: relative;
}
.page-template .x-slider-container.above .x-logobar .x-logobar-inner {
padding-top: 0;
padding-bottom: 0;
}
.page-template .x-slider-container.above .x-logobar .x-logobar-inner .x-brand {
float: none;
}
.page-template .x-slider-container.above .x-logobar{
position: absolute;
top: 20%;
left: 0;
z-index: 9999999;
width: 100%;
height: auto;
text-align: center;
}
.page-template .masthead-stacked .x-navbar .desktop .sub-menu {
background-color: white !important;
}
I already added these in placed. You just need to clear your site cache in SiteGround and CoudFlare and test it again.
Hope this helps. Please let us know how it goes.
Hello there
I have purgad the cache from cloudeflare but nothing has changed I see the same problems that I have listed in my previous post.
Can you please help ?
thanks
Hello there,
I’ve checked the site and the given codes were placed properly. Unfortunately, the login details you gave isn’t working. Can you please update the secure note with the correct Wordpress User/Pass so we can take a closer look of this issue?
Thank you.
hi! sure will do
updating: the submenu is fixed it’s white!
Now I need to fix the menú bar and the logo bar which are still unresolved.
I am resending the example of how it should be in all posts and pages
navigation bar below the picture logo within the picture in the position of the example…
thank you so much for your help
Hey @isa1978,
I added this class has_custom_slider made by @RueNel to your Home Page Body Class.
Next, I added this code
jQuery('.x-slider-container.below').prependTo('.x-logobar-inner .x-container');
to your Home Page’s Content JS in Cornerstone.
And, the result is this:
Now, the reason why I recommended that you upgrade to Pro in this thread is because of the issues you are facing and the solutions for them require custom coding. Sure your header design is simple. But, that is not something that could be readily done in X as you could see the amount of custom codes in your threads. Moreover, pages, posts and archive pages differ in structure like the Slider Above Masthead is only available for pages. Header customization is also one of the main reasons Pro was created. The customizations we’ve done here are hard to maintain this is one of the reasons why custom development is outside the scope of our support. It could break in the future and it would be your responsibility to maintain them. But, we’ve gone way beyond the scope here.
Thank you for understanding.
Oh I see ! ok thanks a lot for your help I really appreciate it.
It’s’ working great so far
if it breaks in the future I will look for another solution.
thanks again for your help
I am glad after 4 days of back and forth it’s finally resolved.
best regards
Isabella