full body width on a single section

[Rabbit1]

What code should I edit in order to get the content of a single section to be on the full body width rather than fixed to the center, but keep all the other sections fixed to the center.

Help would be appreciated.

[MJCS]

Hi @Rabbit,

what sort of content are you talking about? An image? Text? Other? If you can be specific and provide me with a link to the page in question, I might be able to help you with that.

Are you aware of the 'Section' element in the site build tools? You can drop that in your page (above or below the other content) and add an image as a background - they are full width.

Regards, Mark

[Rabbit1]

Thanx for your response.

The website is a one pager, and I created my own header with the section tool using anchored link buttons for the navigation menu, what I want, is that the logo on the header should be all the way to left and not fixed to the middle.

[MJCS]

Hi @Rabbit, 

I think I can help with that. What is your website's address?

Cheers, Mark

[Rabbit1]

http://testsite6575.weebly.com/

Thanx!

[MJCS · Accepted solution]

Hi @Rabbit,

Are you designing this on a wide monitor? The logo is hard left on my laptop but if I drag my browser window to be wider than my monitor it moves in a little.

I've played with CSS and I don't think it's going to work the way you have set up the top. Because you have all the elements in your header as part of the one section of columns, the page is going to spread them out in the same ratio. I tried to overide this but it effects all the content in the rest of your page too, so your Services buttons and employee pictures are all over the place.

I think I've got a better solution: please see my example page I made for you:

http://mjcsdemo.weebly.com/

and click on the first 3 menu items.

When you create pages in a Weebly site, you can choose from 4 options: Standard Page, Blog Page, External Page and Non-Clickable Menu.

My suggestion is to make a 'no header' home page, and then 3 External Page types. The title of pages is 'What we do', Our Team, and 'Contact Us'. Then the important part is to tick the radio button 'OPEN LINK IN SAME TAB', and set the external link to the same page but with the #IDs. For example: http://testsite6575.weebly.com/#whatwedo

Then at each point down the page you want the scrolling to stop you can add a little Embedded Custom HTML element such as:

<div id="whatwedo" style="padding-top: 90px;">
<h2>WHAT WE DO</h2>
</div>

I'd also like to suggest that you add this Javascript to you Page>SEO>Footer Code window which will make for smooth scrolling rather than a jump to the section:

<script>
$('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
        || location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
           if (target.length) {
             $('html,body').animate({
                 scrollTop: target.offset().top
            }, 1000);
            return false;
        }
    }
});
</script>

Let me know what you think and how you go, please.

Regards, Mark

[Rabbit1]

Hey, you're great! and thank you for your time!

if I understand you correctly I should use the themes default header and not my own section, and create the external pages as my nav menu, which is a clever idea and works out beautifully, the only problem is I want to have the contact info on the header as well and I can't do that with the theme default header, (or at least I don't know How to do it) as you can see on the update I did.

your response will be appreciated.

The code for smooth scrolling is great! it makes a huge difference, Thank you!

[MJCS]

Hi @Rabbit, 

Have a look at my site again. I've added some HTML to the No-Header, and a line of CSS to help out with mobile sized screens - there is now the contact details you want too.

In the HTML you'll need to add this to the no-header.html file - below the '<div class="nav desktop-nav">{menu}</div>', and above '<label class="hamburger"><span></span></label>'

<div style="float:right; text-align: right;" class="contactus">
Phone: 
<a href="tel:7184865000">
<span itemprop="telephone">718-486-5000</span>
</a><br>
Email:
<a href="mailto:info@universalelevatorinc.com" target="_top">
<span itemprop="email">info@universalelevatorinc.com</span></a>
</div>

like so:

and then in Settings>SEO>Header Code add this CSS:

<style>
@media screen and (max-width: 992px) {
.contactus {
    padding-right: 40px;
}}
</style>

like so:

That CSS is moving the phone and email text in left a little so that the hamburger menu is still usable. 

There is one thing I'm trying to fix however. When using the hamburger menu on a mobile screen the menu doesn't automatically hide when a selection is made - the screen does navigate to the selected section but the menu has to be manually closed. I'll get back to you if I can find a solution.

Let me know how you go, please.

Regards, Mark

[Rabbit1]

Works out great!

Thank you!

Last question.. how do I change the header color to #941234

Also how do I get the menu centered.

[MJCS]

No problems:

<style>
body.no-header-page.alt-nav-on .birdseye-header, body.splash-banner-page.alt-nav-on .birdseye-header {
    background: #941234 !important;
}
</style>

add that CSS to the Settings>SEO>Header Code.

[MJCS]

Hi @Rabbit,

I've got the solution to the menu not collapsing when an item is selected. Add this to the end of you no-header.html file, immediately above </body>.

<script type="text/javascript">
jQuery(function($) {
$('.wsite-menu-item').on('click', function() {
$('.birdseye-header label.hamburger').trigger('click');
});
});
</script>

I think that takes care of everything. Hope you're happy with the results.

Cheers, Mark 

[Rabbit1]

Thanx again!

(The only thing not working is the color change of the header, which I can go without)

[MJCS]

I can see why, @Rabbit...when you add the CSS to Settings>SEO>Header Code - it needs to be surrounded by <style> tags. In my rush to get you the solution I left them off. This is the same CSS but with the correction:

<style>
body.no-header-page.alt-nav-on .birdseye-header, body.splash-banner-page.alt-nav-on .birdseye-header {
    background: #941234 !important;
}
</style>

EDIT: I've just tried it again this morning and it's not working from my end. Got it fixed now:

<style>
.main-wrap {
    width: 100%;
    background: #941234 !important;
    }
    
.birdseye-header, body.splash-banner-page .birdseye-header {
    background: #941234 !important; 
    }
</style>

Best of luck with the website - it's looking good.

Regards, Mark

[Rabbit1]

yeah, I had it tried with adding <style>, that much I know...

with your updated code it works perfectly, I just removed the first part about main wrap. because it was changing the middle section as well, I only needed the birdseye part.

We finally published the site..

Thanks a lot for your great help, it is much appreciated!

your one hell of a coder! with a solution for every problem!

[MJCS]

Awesome to hear that, @Rabbit.

I don't know if I'd call myself a coder - very much self taught, but I do enjoy a challenge. I'm a high school music teacher, so this is a bit a of a hobby to some degree.

Congratulations on your website - it looks good.

Cheers, Mark