-
Posts
-
How can I move the sidebar menu up to the top if I have a full width color section in the middle of the page? Right now it get’s forced to the bottom.
Here’s a screenshot showing what i’m talking about:
http://cl.ly/image/461Q2J1B2z3B
Thanks,
– John
I was thinking about this and specifically I’d like to end the sidebar once it hit’s a color section and not continue anymore beyond that point. I like when the colored section touches the footer and currently it puts sidebar space in there.
To diagram out what I want to accomplish:
Header / Menu
colored section (page title etc)
sidebar section (main page content)
colored section(s) (containing graphics or messaging, call to action button etc.)
Footer
Is this possible?
Hi,
Sure. http://www.clipular.com/c?7529002=Yld0j1MGlJb0cIcli5R6yaGASL8&f=.png
The way i made it
http://www.clipular.com/c?7518038=i-XTuumXYH7MmMQw6iEi5DSMkGM&f=.png
widget view http://www.clipular.com/c?7527022=jJ3jD_PkgxsaBBN0Wt-6R74E5-w&f=.png
Just make sure the page itself has no sidebar. http://www.clipular.com/c?7523027=_7bOiVSMSpiywQD5Vta0CB7VkTI&f=.png
Thanks,
NIck
Nick,
Thanks for the post. I tried what you mentioned and the results are pretty far apart in style. I put a couple questions on the screen shot.
See attached: http://cl.ly/image/1r1V173s1g17
Thanks,
– John
Hi,
If you show me the pages , I can give you the css, but off the image I can’t do it. You can add advanced layout editor to the blog posts as well if you want.
However I can target the css for the fix aimed specifically at pages so that blog posts will not be touched.The vertical blog separator could be added as you said with an image or by adding another div into the code and mimicking the way its done on the normal sidebar. Let me see the two pages and I can quickly make one look like the other.
Thanks,
Nick
PS I didn’t really understand what you meant by ”bar” in your second question … Its 5am and head getting cloudy…
Hello,
I’m also looking for this, for as soon as you add a ‘Color Section – Element’ to a ‘Sidebar Enabled’ page, any sidebar ‘widgets’ in the sidebar are moved under the ‘Color Section – Element’. It doesn’t matter if the Color Section is put at the bottom and there is no elements below it. It still creates space and puts the Sidebar Widgets under the Color Section area, as seen in John’s images.
I know Nick your suggestion and your images seems to hint to not use the ‘Sidebar’ section from the Layout area. And just use Avia Sidebar Element. Though doing this doesn’t give the same look that the Sidebar (Layout Settings) gives. E.g the line that separates the Sidebar from the content and the CSS of the buttons.
Cheers for all the active help you give here Nick, you are a gem!
Daniel
Hi Daniel,
If you can show me a page built like I suggested, I can give you the css to add what’s needed to make it resemble a standard sidebar. I am wary of building it myself and giving code since its likely to be a waste of time since some difference in theme customization between your version and mine is likely to make the css i give you not work unless I see your page. Thus I like to see the url so I can work right with your native code.
Thanks,
Nick
Hello Nick,
Okay thanks for that. I’ll wait until I near finishing the project and upload it to my online testing environment.
Cheers for the update,
Daniel
Hi,
Ok here we go , this is my first attempt at styling the sidebar element to resemble the proper sidebar.
If you have a 2/3 and 1/3 columns and the 1/3 column has a sidebar element, I created some styles that will now make that ‘mini-sidebar more resemble the full length sidebar. Its a bit messy since I left a lot of css since I wasn’t sure if it doesn anything under specific circumstances, but it works.
#top .container_wrap .avia-builder-el-last {
border-left-style:solid;
border-left-width:1px;
border-color:#E1E1E1;
color:#919191;
float:none;
overflow:hidden;
display:block;
clear:none;
padding-top:4em;
padding-bottom:2em;
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
min-height:1px;
padding-left:2em;
}
#top .content,.sidebar {
padding-top:0px;
padding-bottom:0px;
}
div .av_three_fourth {
margin-left:6%;
}
@media only screen and (min-width:1140px) {
#top .container_wrap .avia-builder-el-last {
width:23em;
}
div .av_three_fourth {
width:67.5%;
}
}
@media only screen and (min-width:980px) and (max-width:1139px) {
#top .container_wrap .avia-builder-el-last {
width:15.9em;
}
.js_active .top_tab .tab {
border-bottom:none;
padding:12px 10px 14px 16px;
}
div .av_three_fourth {
width:67.5%;
}
}
@media only screen and (max-width:979px) {
#top .container_wrap .avia-builder-el-last {
display:none
}
div .av_three_fourth {
width: 98%;
}
}http://www.clipular.com/c?7708069=9VaXJSGLR6AfMuVe33WZKUjKVqg&f=.png
Thanks,
Nick
- The topic ‘Sidebar question’ is closed to new replies.