Remove empty space for “Primary” header + Add Sidebar to Homepage in GridOne

Tagged: Inspirations

Viewing 2 posts - 1 through 2 (of 2 total)

Author

Posts
February 8, 2021 at 4:06 pm #33559

Joe Fonicello
Guest

Hello,

I would like to remove the empty space visible under the stock ticker widget on my website’s homepage. I have tried plenty of custom CSS found on the forums, but nothing has worked yet. I have my website’s menu located on ‘Upper Right’ so the ‘Primary’ menu location is not of any use, and the empty space that it creates by being unoccupied looks very bad.

I am not sure how I can eliminate this space. I have not assigned any menu to the Primary section, but it still shows the space.

As well as this,

I am also looking to add the sidebar to my homepage, hopefully in a way that it stays in one place while the user scrolls. Is this possible? The sidebar is visible when you click on one of the blog posts, but not visible on the homepage.

Thank you,
Joe

February 8, 2021 at 5:01 pm #33607
Jesse Owens
Keymaster
Hi Joe-

Checking out your site today, it looks like you may have already solved most of these issues.

In case anyone else is interested in the solutions, here’s how I would accomplish this.

First, to get rid of the empty space in the “Primary Menu” location when you’re using a different menu location in Grid One. In my testing, there should only be 1 pixel in this row if you’ve removed the menu. Double-check in Customize > Widgets > Below Site Title to make sure that there aren’t any Widgets there taking up extra space.

If you’re still experiencing that, try the following Custom CSS in Customize > Advanced > Custom JS & CSS:
```
.row .header-11 { display: none; }
```
Second, adding a side-bar to the Home Page. Joe, it looks like you’ve solved this by adding the sidebar with some custom coding. The Grid One theme doesn’t normally include a sidebar.

If you’d like to easily set up a sidebar for your website, I recommend checking out the Crio WordPress Theme for Buisness, which has full design controls for every aspect of your site.

Finally, making your sidebar “Sticky,” so that it remains static as your user scrolls. This may take some fiddling around with to get it just right the way you like, but I found that the following Custom CSS will do the trick:
```
@media (min-width: 992px) {
div.col-md-3 aside.sidebar {
    position: fixed;
    width: 12.5%;
}
}
```
Author

Posts