- This topic has 7 replies, 3 voices, and was last updated 4 years, 6 months ago by .
Viewing 8 posts - 1 through 8 (of 8 total)
Viewing 8 posts - 1 through 8 (of 8 total)
- You must be logged in to reply to this topic.
Home › Forums › Pro Themes › Education Hub Pro › Education HUB with Primary and Secondary Sidebar
Can I and HOW can I set up Education HUB Pro with Primnary Sidebar (right side) and Secondary Sidebar (left side) an my Main-Content in the middle using 20% of space for the sidebars each and the rest for the main content in the middle (60%)?
I tried:
#sidebar-primary {max-width: 20%;}
#sidebar-secondary {max-width: 20%;}
and the sidebars went smaller, but the middle didn’t follow an stayed to small, not using the remaining 60%.
Thank you. I have only little experiency with CSS.
I tried this:
.home #primary {width : 60%}
.home #sidebar-primary {width: 20%;}
.home #sidebar-secondary {width: 20%;}
…and without any knowledge of CSS it seems to work. So please give me your ok! 🙂 Or show me a better way to do this…
Thank you
Hello,
Regarding your query, you can set the layout of your pages as per your requirement from the individual page(edited) as shown in the screenshot given below:
This will help the widget to divide its width to 25% primary and 25% secondary which is managed by the theme.
Further, managing the sidebar by CSS, you can add below given CSS following the path Admin Panel > Appearance > Customize > Additional CSS
.home .site-content #primary{
width: 60%;
}
.home #sidebar-primary{
width: 20%;
}
.home #sidebar-secondary{
width: 20%;
}
Hope this helps.
If you have further queries, let us know.
Thank you.
Thank you, it works!
Hello,
Glad we could help you.
Regards.
Hi, When I do this, then I also get a narrow column on my homepage that does have any sidebars. Is there something I can do to adjust the CSS below so that it only applies to pages with sidebars? Thank you!
`.site-content #primary{
width: 60%;
}
#sidebar-primary{
width: 20%;
}
#sidebar-secondary{
width: 20%;
}
Nevermind! I figured it out. I added:
.global-layout-no-sidebar #primary{
width: 100%;
}
Hello,
Glad you found the work around.
Regards.
Cookie | Duration | Description |
---|---|---|
cookielawinfo-checkbox-analytics | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics". |
cookielawinfo-checkbox-functional | 11 months | The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional". |
cookielawinfo-checkbox-necessary | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary". |
cookielawinfo-checkbox-others | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other. |
cookielawinfo-checkbox-performance | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance". |
viewed_cookie_policy | 11 months | The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data. |