Aligning logo, slider and body text

You’re dabbling where I’d like to try! VC looks pretty exciting to me. Would appreciate your final conclusions on it working with Czr when you’re done.

Can’t reach your sandbox, presumably you’ve closed down (I’m in UK). White screen now.

Whoops, thanks for the quick reply. I think the link problem is that my hyperlink included the end parenthesis (my big downfall is parenthetical prose…). Lop that end parenthesis off and you’ll be okay. Not sure why you didn’t get a 404 error message which is what I got using the defective version of the link.

I love Customizr and it is about the only theme I use for the few websites I do. Want to do my own over in it. Visual Composer has allowed to do some intuitive design for setting up nice multiple columns, click and expand FAQs, and other easy methods for structuring one’s content. It seems to have played nicely with Customizr. My other client live website done with both is https://www.maureentaylor.com–also uses Event Calendar on that site and a lot of signup forms, as well as Woo Commerce.

Anyway, a big part of my love of Customizr is the sharing of ideas and snippets, which has helped me learn a lot more detail about WordPress website creation. Helping me with this arborist site will be awesome; he is a little wrapped up in design and not as attentive to content and function (the most common stumbling block I find working with clients). I have only marginalized time to work on these projects so need shortcuts as much as possible.

Thanks in advance for any help you can offer.

Carol

1) Alignment width of slider/body is caused by:

.vc_row {
    margin-left: -15px;
    margin-right: -15px;
}

Suggest you remove, or change -15px to 0px.

2) How about centering the menu using:

/* START OF @d4z - center menu items */
.navbar-inner{
    padding-right: 5px;
}
.tc-header .nav-collapse{
    float: none;
}
.navbar .nav {
    width: 100%;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.nav-collapse .nav > li{
    float: none;
    display: inline-block;
}
.nav-collapse .nav > li li{
    text-align: left;
}
@media (max-width: 979px){
    .nav-collapse .nav > li{
        display: list-item;
    }
}
/* END OF @d4z - center menu items */

3) Close the gap between slider/body

#main-wrapper {
    margin-top: -10px;
}

4) Did you setup a Child Theme yet? Easiest way is to use @d4z’s Plugin – Childify-Me

Get these done and then come back if you need more.

btw, I did get a 404 after, and should have spotted the )!!

I am using a child theme of Customizr, and am having a problem on the blog listing page where the white background with the blog listings extends too far to the right. https://www.coltenadultcare.com/blog/

I can’t seems to find the correct CSS to make this the proper width. Any help is really appreciated! Thanks.

@sigmaweb, please start a new thread (as per the forum welcome)

RDell,

Thanks, these helped a lot, I just have the top logo to align the same way, especially since the slider is only on the home page and he likes the continuous alignment all the way down the pages. The navbar adjustment may not be close enough, though. Centering does help it look better.

Yes, I do have a child theme for this site so all customizations of CSS and functions.php when needed go to the child, not the main. I am using Child Theme Configurator by Lilaea Media, which I found to be really easy and nice to use.

Cheers, and thanks again!

Carol

The logo is centered on the page. Are you saying to center on the body container, ie ignore the right sidebar?

If so, play with:

.tc-header .brand .site-logo img, .tc-header .brand .site-title {
    margin-left: -40px; /* Adjust */
}

Well, not really. What I had hoped was to justify the logo image so it was flush with the slider and the body text, but I am finding that the header container/wrapper is “hard-coded” to 1024×282 for the image and increasing the size beyond that isn’t working.

That would probably mean narrowing the length of the entire slider and body to align with the logo. Is it worth the bother, I ask myself? I think I would have to do some jiggery-pokery with the right and left margins of the slider, and then do the same with VC_row margins to realign them. May just see if he’ll live with the current version.

Is there anyway of closing up the navbar (still too much gray space between the menu items and the logo and slider)?

Try

.navbar .nav {
    margin-top: -10px;
}
.navbar {
    margin-bottom: -60px;
}

Thanks for this! It seems to work fine. Someday I will learn all the intricacies of CSS and HTML. I had something similar but not correct.

Please mark as [resolved] if you’re happy.

Done.