Hi there!
I just learned how to add a sidebar for only one page on my site. Now I have a slight problem placing it. Instead of having the sidebar in fixed in full height beside the main content I would like to show it between the masthead and the footer. What is the best way of doing that? Thanks!
Hi There,
To achieve that, please setup a child theme first:
After that add the following code under functions.php file locates in your child theme:
add_action( 'x_before_masthead_begin', 'header_sidebar' );
function header_sidebar(){
dynamic_sidebar( 'ups-sidebar-header' )
}
add_action( 'x_before_colophon_begin', 'footer_sidebar' );
function footer_sidebar(){
dynamic_sidebar( 'ups-sidebar-footer' )
}
The ups-sidebar-header and ups-sidebar-header are your sidebar ID, you can create unlimited sidebars under Appearance > Sidebars:
https://theme.co/apex/forum/t/features-unlimited-sidebars/95
Hope that helps and thank you for understanding.
Thank you very much!
Unfortunately it seems like there is some kind of a problem in the code you gave:
syntax error, unexpected ‘}’
This kind of coding is not familiar to me, so I need to ask some further infomation. Is there two different sidebars in the code? I only have one sidebar (additional menu) and I wish that to be placed between header and footer, like this. 
Thank you for your patience!
Hi @SSE
I’ve checked the code and I can see the code has a good syntax, however, we will need to check your website link to see if this is the best thing that would suite your need or not, so please provide us with the exact page link showing this sidebar.
Thanks.
Thank you for your help!
I’ll give you the link to my test page.
Hey There,
The correct php code is this:
add_action( 'x_before_masthead_begin', 'header_sidebar' );
function header_sidebar(){
dynamic_sidebar( 'ups-sidebar-header' );
}
add_action( 'x_before_colophon_begin', 'footer_sidebar' );
function footer_sidebar(){
dynamic_sidebar( 'ups-sidebar-footer' );
}
By the way, the most appropriate stack to use that is similar to your mock layout is the Integrity, Ethos or Renew. Icons is not ideal because the sidebar is in fixed right or fixed left position.
Hope this helps.
Hi,
Thank you. I don’t know what I do wrong, but nothing changes when I add that code to my child theme’s functions.php. Could you help me?
I don’t know much about coding and every change takes a lot of time and effort (googling, trying, translating to understand etc.). I only try to get the sidebar for a few pages and the place I described. Do you recommend changing the stack? I did not see any changes in sidebar, when I tried different stacks on Theme Options.
Hi,
The code provided will add two sidebars which I think was a misunderstanding.
Based on the mockup you provided we highly recommend that you change your stack to integrity.
This is how the page looks with a left sidebar
http://demo.theme.co/integrity-1/pages/sidebar-left/
Thanks
Hi,
Thanks! I changed the stack and sidebar is now on the right place.
Changing stack however caused a few styling issues on my site. I tried to find answers on my own, but that didn’t work out very well. Could you help me with these styling issues, please? I am looking for clean and simple layout and Integrity added a lot of lines everywhere.
In menus there are small arrows in front of every menu item (in footer and additional custom menus). How can I get rid of them? There are also lines around or under some menus, and I’d like them to be without any lines.
In header menu hover there is a black bar above links, which I’d like to erase.
Header menu is also too “tight”, how can I add more space between header menu links?
Behind breadcrumbs there are grey background, how to change that to white?
There are also interesting boxes, and shadows around content and elements. How can I remove them?
I would be so grateful if you could help me to achieve the layout I had before changing the stack.
Hey @SSE,
Please add the code below in Theme Options > CSS.
.x-boxed-layout-active .site, .x-boxed-layout-active .x-site,
.x-boxed-layout-active .entry-wrap,
.widget ul, .widget ol,
.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
border: 0;
box-shadow: none !important;
}
.widget_nav_menu ul>li a:before {
display: none;
}
That would remove the Integrity’s style that you have described provided that you completely copy the code and you don’t have any syntax errors in your custom CSS. See https://youtu.be/1mrmKcIDtJ0
For the Navbar menu item spacing, please go to Theme Options > Header > Links – Alignment and increase the Navbar Top Link Spacing (px) value.
Please also note that I have given custom code only to override some simple styles of the stack. We can’t give you complex custom code like one that will override the layout of the site nor add additional structures.
Hope that helps and thank you for understanding.
Thank you very much!
Now the borders are gone. The boxes are still visible in a way, because the content “box” is smaller than the header. Is there any way to make those boxes keep the same width? I tried to change site layout to fullwidth, but it didn’t have any effect (and I’m not looking for fullwidth layout, just same width for the whole site).
Thanks!
You’re using a product shortcode to display the product inside a page post type. Please set the Row’s Inner Container off. I’m referring to the Row where you added the product shortcode.
Then, set your page template to Blank No Container | Header Footer.
I’d recommend that you actually use WooCommerce’s built-in product page instead of inserting a product shortcode in a page post type though so you eliminate this extra setup.
Thanks.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.