Sidebar layout

I have found a way to come around the first three (1-3).

But I still can’t find a solution to the fourth (4).

Hi @mey007

The width of the sidebar can be changed on the customize page

Customize / Presentation / Layout and Sidebars

Column Width and Position

Set left 300px and Publish

Note
If you need a sidebar width greater than 300px

It is convenient to use Extra Sidebar. Please set Extra Sidebar Width to 50% and check how it looks.

Thank you.

The width and position is not the problem – it’s fine.

It’s the rest…

Do you always want to display the sidebar?

Customize / Presentation / Layout and Sidebars

Responsive Default Sidebar, set No
Responsive Extra Sidebar, set No

Publish

Thank you.

• This reply was modified 6 years, 11 months ago by nobita.

On almost all the pages on the site I want to display the sidebar.

I have made different menus for different pages so that I can keep the sidebar with as less content as possible, and on the same time both show where I am on the site, how to get to that page and which other subpages there are under the same parent page – for easier navigation and overview.

Regarding the concept “responsive menu” I see that I have misunderstood the meaning of this word. I thought it meant that the menu was able to expand by clicking on a parent page link and automatically folded in again shortly after. But now I see that it means that the menu is able to automatically fit the screen size of the used device.

What I need is a simple sidebar with a nice layout where it is very easy to see the different levels of parent pages and subpages. And where the sidebar expand by clicking on a parent side link or a subpage with lower subpages, but does not folds back in again when clicking on a lower subpage link. Instead, it must first fold in again when clicking on a parent side or another higher level subpage link.

Hope you understand… ??

What I need is a simple sidebar with a nice layout where it is very easy to see the different levels of parent pages and subpages.

If you need left margin to know the menu hierarchy, please add the following style

Customize / Additional CSS

for widget Navigation Menu

.widget_nav_menu .sub-menu{
	margin-left:1em
}

for widget pages

.widget_pages .children,
.widget_pages .sub-menu{
	margin-left:1em;
}

And where the sidebar expand by clicking on a parent side link or a subpage with lower subpages, but does not folds back in again when clicking on a lower subpage link. Instead, it must first fold in again when clicking on a parent side or another higher level subpage link.

I’m not good at English

I can not understand this part. Do you explain the behavior of something plugin? Please explain a little more easily

Thank you.

• This reply was modified 6 years, 11 months ago by nobita.

Thank you for your code.

Regarding:

And where the sidebar expand by clicking on a parent side link or a subpage with lower subpages, but does not folds back in again when clicking on a lower subpage link. Instead, it must first fold in again when clicking on a parent side or another higher level subpage link.

I want a sidebar menu that:
1) Is made up by predefined custom menus in the WP menu-editor so that I can have different menus for different parts of the site
2) Only shows the subpages that is one level under the page (parent page, subpage, etc.) that is viewed/clicked on
3) Shows the subpages by expanding the menu, instead of a vertical dropdown menu, so that it is possible for the students to see where I am on the site all the time in the classroom

I hope this is easier to understand.

I’m not good at English either.

• This reply was modified 6 years, 11 months ago by mey007.

You are also welcome to recommend a plugin I can use for this, if you know one that can do this.

This is the style tested for the user interface of the menu widget.

It is very rough and may affect the display of other widgets.

Perhaps, I thought you needed such a user interface.

This interface has several problems.
For mobile device access, there is a possibility that the entire menu can not be displayed.

Accessibility problems, menu access with tab key without mouse can not be done.

Please use CSS media queries – or devise them.

Customize / Additional CSS

.rsidebar,
.lsidebar{
    overflow:visible;
}
.rsidebar .children,
.rsidebar .sub-menu,
.lsidebar .children,
.lsidebar .sub-menu{
    display:none;
}
.rsidebar li,
.lsidebar li{
    position:relative;
}
.rsidebar a,
.lsidebar a{
    display:block;
    width:100%;
    height:100%;
  
}
.yui-t3 .lsidebar .children:hover,
.yui-t3 .lsidebar .sub-menu:hover,
.yui-t3 .lsidebar a:hover + .children,
.yui-t3 .lsidebar a:hover + .sub-menu,
.yui-t2 .lsidebar .children:hover,
.yui-t2 .lsidebar .sub-menu:hover,
.yui-t2 .lsidebar a:hover + .children,
.yui-t2 .lsidebar a:hover + .sub-menu,
.yui-t1 .lsidebar .children:hover,
.yui-t1 .lsidebar .sub-menu:hover,
.yui-t1 .lsidebar a:hover + .children,
.yui-t1 .lsidebar a:hover + .sub-menu{
    display:block;
    position:absolute;
    left:100%;
    top:0;
    width:12em;
    background:#333;
    margin-top:0;
}
.lsidebar .children:hover,
.lsidebar .sub-menu:hover,
.yui-t6 .lsidebar .children:hover,
.yui-t6 .lsidebar .sub-menu:hover,
.yui-t6 .lsidebar a:hover + .children,
.yui-t6 .lsidebar a:hover + .sub-menu,
.yui-t5 .lsidebar .children:hover,
.yui-t5 .lsidebar .sub-menu:hover,
.yui-t5 .lsidebar a:hover + .children,
.yui-t5 .lsidebar a:hover + .sub-menu,
.yui-t4 .lsidebar .children:hover,
.yui-t4 .lsidebar .sub-menu:hover,
.yui-t4 .lsidebar a:hover + .children,
.yui-t4 .lsidebar a:hover + .sub-menu,
.rsidebar .children:hover,
.rsidebar .sub-menu:hover,
.rsidebar a:hover + .children,
.rsidebar a:hover + .sub-menu{
    display:block;
    position:absolute;
    right:100%;
    top:0;
    width:12em;
    background:#333;
    margin-top:0;
}

Thank you.

• This reply was modified 6 years, 11 months ago by nobita.

Sorry, but I do not know anything about CSS code.

That’s why I ask if the author of this theme could incorporate such a sitebar layout in the theme or if someone could recommend me a plugin where I can make such a sitebar or if someone may have the code I need to make such a sitebar.

But thanks a lot for your time and effort.

I do not know anything about CSS code.

I do not know the plugin that can do it

If customization of CSS is impossible, there are two most easy ways to achieve this with the current function, so please try it.

1. Set the extra side bar to 50% or more
Set Navigation Menu in Extra Sidebar area.

Customize / Presentation / Layout and Sidebars

Extra Sidebar Width, set 50% or more

Publish

2. using sticky sidebar area

Set Navigation Menu in sticky Sidebar area.

This sidebar is displayed only on the homepage, but if you customize the template you can also display it on the archive page etc.

I do not know if it is appropriate as I do not know exactly what site you plan on

Because there is a possibility that it is useless, please forgive in that case

I have bought the plugin “Yellow Pencil” to try to change the layout of the sitebar.

I do not totally get the layout that I want, but at least it is a big step on the way.

I especially miss the expansion option; that the menu shows the subpages by expanding, instead of just seeing all the subpages in the menu from the start.

Can you help with that… ?

I do not have a “Yellow Pencil” plugin.

It’s a good idea to ask plug-in support for how to do it.

If you need to explain what you want to do, the CSS code will be useful for explanation.

Thank you.

In “Yellow Pencil” it is almost no problem to change the visually layout of the sitebar.

But some of the sitebar code is written in JS. But I can’t find that part of the code in the code editor. And I would like to change the color settings when a subpage is chosen as all the upper pages gets very dark gray when doing so and it is almost impossible to see them on a black background. And I would like to keep the background color.

Do you know where I should try to find the JS code in the code editor ? – I mean under which part of the code in the code editor should I try to find it ?

The code belongs to the plugin “Dropdown Menu Widget”, which is totally free. I’ve chosen the “Shiny Black”-menu style theme.

I use the plugin for my primary menu, and it seems that the plugins JS code also influences my sitebar menu which is only nice. But I would like to change the used color for my sitebar only and not for my navigation bar. I have almost done it, but as said before, I miss to change the color changing which seems to happen in the JS code.

If you are using a plugin, if you ask questions about plugin support, I think that you can get more accurate and correct answers.

Thank you ??