Trying to match width of content+primary sidebar to primary menu width

This topic has 8 replies, 2 voices, and was last updated 8 years, 3 months ago by Pratik.

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

Author

Posts
August 5, 2016 at 9:10 pm #96660

David
Participant

I’m sure this will be an edit of one of the dozens of css files but I can’t figure out which one, have tried several but to no affect.

site=www.directpay-test.com, click System or Solution link on primary menu for static page.

I want to match the width of the content being viewed by the above link plus the primary sidebar on the right to the width of the primary menu above so it looks like a single uniform box.
Then I want to extend the primary sidebar height so that the bottom is the same length as the content when viewing the home page.

Don’t have to do it for me, just give me the file to edit and which part and I’ll mess around with it until I get it.

Thanks!

August 5, 2016 at 11:44 pm #96674

David
Participant

oops, forgot to mention, the theme is Catch Responsive Pro

August 6, 2016 at 12:48 pm #96694

Pratik
Participant

@davidamericana-usa-com:
I am not quite clear to exactly what you want. You can add in your CSS code in Appearance=> Customize=> Theme Options=> Custom CSS box. This will override the main CSS file.

It is not good to edit core theme files as when you update the theme, the changes will be lost. If there are major changes, please do it via child theme. More info: https://catchthemes.com/blog/create-child-theme-wordpress/

Also, can you make your requirements clear maybe via a screenshot?

August 8, 2016 at 7:12 pm #96808

David
Participant

if there was a way to put a screenshot here I would certainly do so.

August 9, 2016 at 9:55 am #96853

Pratik
Participant

You can use dropbox or any image sharing sites like https://postimage.org/, http://imgur.com/

Regards,
Pratik

August 9, 2016 at 7:51 pm #96897

David
Participant

`Link to screenshot is:
<a href=”https://s10.postimg.org/t9nxwhtsp/WIDTH_ISSUE.png”>Here</a>

The width of the primary menu (between the green arrows) is fine.
I am trying to adjust the width of the content + sidebar (between yellow arrows)
to match the width of the primary menu above.
I have tried making css entries to margin, padding, and border, and edited the style.css section 13 but all I can manage to do is make it worse.

August 10, 2016 at 2:18 pm #96998
Pratik
Participant
To match menu and content on static pages use following CSS code in Appearance=> Customize=> Theme Options=> Custom CSS box:
```
body:not(.home) .nav-primary{
    margin-left: 20px;
    margin-right: 20px;
}
```
To extend primary sidebar on to match content on homepage, use following code:
```
.home .sidebar-primary {
    padding-bottom: 28px;
}
```
Let me know how it goes.
August 11, 2016 at 9:30 pm #97072

David
Participant

thank you…it did work for the not(.home) part, and I tried taking the not(.home) out to see if it would match the width of the menu even when on the home page but that had no effect.

adding the padding to the .sidebar-primary had no effect though.

August 12, 2016 at 12:17 pm #97106
Pratik
Participant
Do you want the menu and slider to be same width as content in home page as well, to achieve that, remove the previous code and add in following:
```
#feature-slider, .nav-primary {
    margin-left: 20px;
    margin-right: 20px;
}
```
This should work on all pages. Previously, I thought you wanted it only on pages.

adding the padding to the .sidebar-primary had no effect though.
It should work, can you add the code in and then let me see how it looks on site?
Author

Posts