Title: Sidebar layout Last modified: December 27, 2017 --- # Sidebar layout * [mey007](https://wordpress.org/support/users/mey007/) * (@mey007) * [8 years, 5 months ago](https://wordpress.org/support/topic/sidebar-layout-2/) * I miss the opportunity to change the layout of the menubar and the sidebar without writing any code regarding changing: * 1) The hight of the menubar to make better use of the space. * 2) The size of the menuitems in the menubar as I have some labels that are longer and I can’t see the arrows that should be next to those labels * 3) The colors of the arrows next to the labels in the menubar – some of them are black, therefore I can’t see them and need to change the color of them to the same color as the other arrows which is almost white. * 4) The layout of the sidebar by choosing between some nice predefined layouts. As my site is going to be used for education, I miss the opportunity to get a sidebar where it is easy for the students to see where I am on the site at any time. That means no responsive sitebar where the clicked pages disappear afterwards. But instead a sitebar that shows the direct path to the viewed site at any time and where it is easy to distinguish between upper and lower pages. See for example the sitebar in the WordPress theme “DarkElements” – of course I haven’t chosen that theme as your theme is the most optimal theme I could find for my purpose. I have tried all the plugins I could find to try to make the layout of the sitebar nice, but all the sitebars doesn’t look nice in your theme. And I have also tried to make many small sitebars that is viewed in individual pages to make them easier to navigate in. But I still need to change the layout of the sitebars so that it is easy to distinguish between upper and lower pages. * I sincerely hope that you will make those 4 things possible as I can’t use the site and your theme properly for education without it. - This topic was modified 8 years, 5 months ago by [mey007](https://wordpress.org/support/users/mey007/). Viewing 15 replies - 1 through 15 (of 15 total) * Thread Starter [mey007](https://wordpress.org/support/users/mey007/) * (@mey007) * [8 years, 5 months ago](https://wordpress.org/support/topic/sidebar-layout-2/#post-9816385) * 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). * Theme Author [nobita](https://wordpress.org/support/users/nobita/) * (@nobita) * [8 years, 5 months ago](https://wordpress.org/support/topic/sidebar-layout-2/#post-9816659) * Hi [@mey007](https://wordpress.org/support/users/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. * Thread Starter [mey007](https://wordpress.org/support/users/mey007/) * (@mey007) * [8 years, 5 months ago](https://wordpress.org/support/topic/sidebar-layout-2/#post-9819137) * The width and position is not the problem – it’s fine. * It’s the rest… * Theme Author [nobita](https://wordpress.org/support/users/nobita/) * (@nobita) * [8 years, 5 months ago](https://wordpress.org/support/topic/sidebar-layout-2/#post-9819341) * 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 8 years, 5 months ago by [nobita](https://wordpress.org/support/users/nobita/). * Thread Starter [mey007](https://wordpress.org/support/users/mey007/) * (@mey007) * [8 years, 5 months ago](https://wordpress.org/support/topic/sidebar-layout-2/#post-9821462) * 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… 🙂 * Theme Author [nobita](https://wordpress.org/support/users/nobita/) * (@nobita) * [8 years, 5 months ago](https://wordpress.org/support/topic/sidebar-layout-2/#post-9831946) * > 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 8 years, 5 months ago by [nobita](https://wordpress.org/support/users/nobita/). * Thread Starter [mey007](https://wordpress.org/support/users/mey007/) * (@mey007) * [8 years, 5 months ago](https://wordpress.org/support/topic/sidebar-layout-2/#post-9835304) * 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 8 years, 5 months ago by [mey007](https://wordpress.org/support/users/mey007/). * Thread Starter [mey007](https://wordpress.org/support/users/mey007/) * (@mey007) * [8 years, 5 months ago](https://wordpress.org/support/topic/sidebar-layout-2/#post-9835348) * You are also welcome to recommend a plugin I can use for this, if you know one that can do this. * Theme Author [nobita](https://wordpress.org/support/users/nobita/) * (@nobita) * [8 years, 5 months ago](https://wordpress.org/support/topic/sidebar-layout-2/#post-9835468) * 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 8 years, 5 months ago by [nobita](https://wordpress.org/support/users/nobita/). * Thread Starter [mey007](https://wordpress.org/support/users/mey007/) * (@mey007) * [8 years, 5 months ago](https://wordpress.org/support/topic/sidebar-layout-2/#post-9835615) * 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. * Theme Author [nobita](https://wordpress.org/support/users/nobita/) * (@nobita) * [8 years, 5 months ago](https://wordpress.org/support/topic/sidebar-layout-2/#post-9836066) * > 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 * Thread Starter [mey007](https://wordpress.org/support/users/mey007/) * (@mey007) * [8 years, 5 months ago](https://wordpress.org/support/topic/sidebar-layout-2/#post-9839569) * 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… ? * Theme Author [nobita](https://wordpress.org/support/users/nobita/) * (@nobita) * [8 years, 5 months ago](https://wordpress.org/support/topic/sidebar-layout-2/#post-9840535) * 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. * Thread Starter [mey007](https://wordpress.org/support/users/mey007/) * (@mey007) * [8 years, 5 months ago](https://wordpress.org/support/topic/sidebar-layout-2/#post-9841661) * 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. * Theme Author [nobita](https://wordpress.org/support/users/nobita/) * (@nobita) * [8 years, 5 months ago](https://wordpress.org/support/topic/sidebar-layout-2/#post-9845960) * 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 🙂 Viewing 15 replies - 1 through 15 (of 15 total) The topic ‘Sidebar layout’ is closed to new replies. * ![](https://i0.wp.com/themes.svn.wordpress.org/raindrops/1.700/screenshot.png) * raindrops * [Support Threads](https://wordpress.org/support/theme/raindrops/) * [Active Topics](https://wordpress.org/support/theme/raindrops/active/) * [Unresolved Topics](https://wordpress.org/support/theme/raindrops/unresolved/) * [Reviews](https://wordpress.org/support/theme/raindrops/reviews/) * 15 replies * 2 participants * Last reply from: [nobita](https://wordpress.org/support/users/nobita/) * Last activity: [8 years, 5 months ago](https://wordpress.org/support/topic/sidebar-layout-2/#post-9845960) * Status: not resolved