CODEWITHSUNDEEP
htmlcsswordpress
Sam Jefferies
Sam Jefferies

Reputation: 594

Bring my right sidebar to the top of my page

Since centring my blog content my right hand sidebar has fallen down below my content.

How can I bring it back it up so it sits to the right of my page? (Between the right side border and the edge of the page).

Live link: https://www.moneynest.co.uk/how-to-choose-a-broker/

Code:

<html>
<body class="post-template-default single single-post postid-594 single-format-standard logged-in admin-bar no-customize-support nolayout windows chrome override" itemscope itemtype="http://schema.org/WebPage"><div class="site-container">
<div class="site-inner">    
    <div class="content">
        <div id="container">
            <div class="central-container">
                <div class="middle-content">
                <div class="inner-post-head">
                </div>
                    <div class="data-content">
    <!--MAIN CONTENT HERE -->         
                  </div><!-- End .middle-content -->
    </div>
        </div><!-- End #container -->
  </div><!-- End #content -->
     <aside class="sidebar sidebar-primary widget-area" role="complementary" aria-label="Primary Sidebar" itemscope itemtype="http://schema.org/WPSideBar" id="genesis-sidebar-primary"><h2 class="genesis-sidebar-title screen-reader-text">Primary Sidebar</h2><section id="text-9" class="widget widget_text"><div class="widget-wrap">          <div class="textwidget">
 <!--SIDE BAR CONTENT HERE--></div>
  <!--<div id="popular-articles">
    <p class="popular-articles-text">Popular articles</p>
  </div>-->
</div>
</div>
        </div>
<section id="text-10" class="widget widget_text"><div class="widget-wrap"   
        </div></section>
        </div>
        </aside>
<!--END OF SIDEBAR--!>
<!--FOOTER STUFF-->
        </body>
</html>

Running Wordpress with custom Genesis theme and Bootstrap.

Upvotes: 0

Views: 1381

Answers (4)

Anjana Shyamlal
Anjana Shyamlal

Reputation: 408

Your style sheet is having below code

.site-inner, .wrap {
    max-width: 1200px;
}

As you have centered your contents with margin-left, this 1200px is not enough to hold your sidebar. SO please change that to below one so that it will work for you

.site-inner, .wrap {
    max-width: 100%;
}

Method 2: Make your content part centralized through out and make your sidebar positioned to right side. Style as follows:

.site-inner{
position: relative;
}
.content {
width: 792px;
margin: 0 auto !important;
float: none;
}
.sidebar-primary {
    position: absolute;
    width: 240px !important;
    right: 0px;
    top: 0px;
}

Upvotes: 1

Incarnate
Incarnate

Reputation: 19

I tested in your page and did this. It is working. Just decrease your margin-left property in relative media queries.

@media only screen and (min-width: 1200px)
(index):27
.content {
    margin-left: 10%;
}

Upvotes: 0

Liam McArthur
Liam McArthur

Reputation: 1033

As well as removing the left margin from .content, I'd also recommend removing padding from .site-inner and adding margin:0 auto;.

Upvotes: 0

Krystian Borysewicz
Krystian Borysewicz

Reputation: 779

position: fixed;
right: 0;
top: 0;

or instead make it thinner (width:80%) and give the content display: inline

Upvotes: 0

Related Questions