Left navigation bar under top header

[ChristianYM]

Hello support,

we are in the process of building a documentation site. This page should have two top headers and a left navigation bar which isn’t sticked on the left side. For illustration I have attached a picture:

As you can see in the picture this navigation bar should be below the top headers and not stick to the left side of the page. In addition the Left Header and Content should be centered

We currently have a workaround in which we have placed a “Navigation Inline” element in the first column for each page. However, this influences the search results, since the elements of this column are also searched by WordPress.

Is there a possibility to move the “Left bar” to the right? Thanks!

[tristup]

Hi @ChristianYM

Thanks for reaching out.

You can place the Navigation Inline element to the right column to, in that case, you need to create a section with two columns left one for content and the right one for the menu. The left column should have bigger width than the right column, just the opposite of your illustration.
I have tried to show you an example by doing it in local setup, please find the screenshot below.

Hope it helps.

Thanks

[ChristianYM]

Hi @tristup

thanks for the fast reply. Unfortunately that is not what I want to achieve. I want to have a left sidebar which isn’t sticky to the left side of the screen.

Is the only way to have a second, smaller column on the left side or is it possible to achieve this kind of design with the “Pro Header Editor”?

The issue with the column is that the conent of the navigation can also be found in the search results. Thank you.

[nabeel]

Hey Christian,

In header builder there is an option to create the Left Header (see screenshot below) but the left header will stick to the left of the screen.

The only option you have is to either enable the sidebar on the page via Theme Options > Layout and Design > Content Layout (see screenshot)

In this method you can add the Navigation element in the sidebar using Global Block, simply create a Global Block with the Navigation element and paste the shortcode in the Text widget and include the Text widget in your sidebar.

The other option is to have an additional column as mentioned by Tristup. Hope this helps!

[ChristianYM]

Hi @nabeel

thank you, I’m almost there ;). Unfortunately the navigation is displayed under the content. Do I need to change the template of my page? Thank you :)!

[christian]

Hey @ChristianYM,

Please post the URL of the page you’re working on so we could check the issue.

Thanks.

[ChristianYM]

Here is the mentioned URL:

[marc_a]

Hi @ChristianYM,

I have checked your test page and you change the width of sidebar and content.

On Pro theme, the default width of the sidebar is:

 .x-sidebar {
       width: 25.536945%;
  }

but your CSS is:

.x-sidebar {
 width: -2.463055%;
}

Note: negative width is not valid

On Pro theme, the default width of the content is:

.x-main {
width: 69.536945%;
}

but your CSS is:

.x-main {
width: 97.536945%;
}

Please change the CSS code in your Pro > Theme Options > CSS, with the correct CSS code, I posted above.

Hope that helps and let us know how it goes.

Thank you.

[ChristianYM]

Hi @cramaton

wow, thank you. I have no idea where the percentages you mentioned came from . It isn’t in the theme options CSS. I have one last question :

Could you please recheck the mentioned page above and could tell me how to achieve a 100% height for the background color of the navigation bar? If you scroll down the background color stops at the end of the page.

Currently we are using padding-bottom: 100%, but this is probably not the best solution.

Thank you.

[tristup]

Hi @ChristianYM,

Seems that no widget area is assigned to the sidebar and that is the cause of the issue here. Sidebar height depends on the number of widgets shown into it.
And currently, there is no such option to set the height of sidebar 100%.

Thanks