Your site's design is the 3rd part of your site's and business's "Personality" (if you do not remember the first 2 parts, see DAY 5). Ideas for customizing Solo Build It!'s Site Designer templates, including total customization to build your own unique Site Design.

Moderators: A J from Somewhere Hot, Laura from Chautauqua

#1392463 by Marius from Camp Wood
Tue Feb 13, 2018 9:02 am

Hi SBIers!

I've attempted to make the horizontal nav at the top of my site cover the entire page but struggle to make it work due to my lack of CSS skills. :roll:

I currently have this in my SD CSS code...

Code: Select all}

#PageWrapper #Header .HorizontalNavBar, html.mobile #PageWrapper #Header .HorizontalNavBar {
position: fixed;
margin:5;
background: #002F44;
max-width: 980px;
}


What should I change to make the navbar span across the entire page and not just the content column? The navbar itself needs to stay in the same position, but the background colour must stretch across the entire page.

Thank you so much if you can help!
Marius
#1392473 by Marius from Camp Wood
Tue Feb 13, 2018 12:25 pm
Juri, you're a star! Thank you.

Just one quick question. I hope you don't mind.

The actual navbar text is now in the right corner and I cannot seem to budge it by using the position tool for Horizontal Navbar in SD.

Do I need to change it in the CSS somehow? I want it to line up to the right edge of the content column.

Thank you so much again for your help with the above CSS!

Marius
#1392475 by Marius from Camp Wood
Tue Feb 13, 2018 1:04 pm
Hi Juri,

Please disregard my previous post. I've managed to get it right by centering in the Block Builder and then using SD to nudge it into position.

Thank you again!
Marius
#1392479 by Juri from plainlight.com
Tue Feb 13, 2018 2:13 pm

It's up to you, of course, but I'd rather restore the right alignment and change the magic padding to

Code: Select all#PageWrapper div.HorizontalNavBar ul.root, html.mobile #PageWrapper div.HorizontalNavBar ul.root {
    position: relative;
    right: calc(50% - 460px);
}

instead. Even if it looks the same in the end, it's easier to comprehend.

Also, "margin: 5;", still in place from your original CSS rule, is incorrect syntax (missing units). I'd remove it altogether or replace it with "margin: 0;".

Still, you don't have to change it because of me :wink:

Kind regards,
J.
#1392487 by Marius from Camp Wood
Tue Feb 13, 2018 3:51 pm
Thank you again, Juri!

"Still, you don't have to change it because of me :wink: "

Oh I will! hahaha

I tried to add the CSS you've provided but didn't get the result.

Do I have to modify the existing CSS, replace it or just add the new CSS you gave?

Thank you so much!
Marius
#1392492 by Juri from plainlight.com
Tue Feb 13, 2018 4:12 pm

Here's how it looks like in Firefox when I just add the style to your current page:

For Independent Music Producers and Musicians.png
Right-aligned with the Content Column
For Independent Music Producers and Musicians.png (31.08 KiB) Viewed 142 times

I think it should suffice to just add it to Custom CSS in Site Designer.

To be sure, test in BlockBuilder with one of your pages first. Add the following to This Page Only section of the Head in BB:

Code: Select all<style type="text/css">
#PageWrapper div.HorizontalNavBar ul.root, html.mobile #PageWrapper div.HorizontalNavBar ul.root {
    position: relative;
    right: calc(50% - 460px);
}
</style>

(This is the same code wrapped in <style> HTML tags. These tags have to be removed before adding the rules to Custom CSS in Site Designer.)

Kind regards,
J.
#1392494 by Marius from Camp Wood
Tue Feb 13, 2018 4:40 pm

It works when I add it to the head section.

I then remove the style tags and add it to the CSS section in SD and then it goes all the way right again.

This is everything I have in my custom CSS at the moment:

Code: Select all.blogItItem .blogItReadMore {
    clear: both;
}

.blogItItem {
    margin: 18px 0;
    padding: 0 12px;
    border: 1px solid #ccc;
    background: #eeeeee;
    border-radius: 4px;
}

.ItemRight {
    float: right;
    margin: 2px 0 12px 18px;
    text-align: center;
}

.ItemCenter {
    margin: 2px auto 12px;
    text-align: center;
    clear: both;
}

.ItemLeft {
    float: left;
    margin: 2px 18px 12px 0;
    text-align: center;
}

#PageWrapper #Header .HorizontalNavBar, html.mobile #PageWrapper #Header .HorizontalNavBar {
    position: fixed;
    left: 0;
    margin: 0;
    background: #002F44;
    width: 100%;
}

#PageWrapper div.HorizontalNavBar ul.root, html.mobile #PageWrapper div.HorizontalNavBar ul.root {
    position: relative;
    right: calc(50% - 460px);
}


Could it be elsewhere that it messes up the code?

:?

Thank you, Juri. I appreciate your help!

Marius
#1392496 by Juri from plainlight.com
Tue Feb 13, 2018 4:55 pm
Have you tried to clear the cache and reload the page / restart the browser?

[Our style files run through pagespeed, so it can take some time before the changes get propagated.]

If this doesn't help, could you add the CSS in Site Designer so I can have another look? I need to relocate from the office to home, but will get back to you as soon as I get there.

Kind regards,
J.
Similar Topics Statistics Last post
How do I create a full-width colour block with no side padding?
by Nadine from Yorkton Fri Aug 11, 2017 4:53 pm
3 Replies
327 Views
by Laura from Chautauqua
Wed Sep 06, 2017 4:48 pm
Horizontal nav has disappeared!
by Patricia from edible-landscape-design.com Fri Aug 25, 2017 10:51 pm
3 Replies
295 Views
by Patricia from edible-landscape-design.com
Fri Sep 15, 2017 7:18 pm
How to Change NavBar Buttons Height - smaller than default
by erin from Climax Thu May 11, 2017 5:42 am
4 Replies
312 Views
by Laura from Golden
Fri May 12, 2017 9:20 pm
how to make my website background color become white?
by koh from tupperware-guide.com Thu May 11, 2017 4:43 pm
5 Replies
504 Views
by koh from tupperware-guide.com
Fri May 19, 2017 5:43 pm
Making my own banner picture: What size?
by James from London Wed Apr 26, 2017 1:21 pm
10 Replies
742 Views
by James from London
Tue May 23, 2017 6:34 pm

Users browsing this forum: Tammy from Newton Upper Falls and 2 guests