Archived

This topic is now archived and is closed to further replies.

  • 0

How Can I Extend My Header & Navigation Background Colour To Fill Full Width

Question

Posted · Report post

Hi guys, 

 

Can someone please help me, I am wanting to add a little custom CSS to the backgrounds of my header, branding and brand/nav area on my site to extend it to fill the full width of the screen. 


I want it to look and function just like this : Site

 

If you zoom out of the site you will see that their header and navigation continue to extend the full width. 


Hope this makes sense. 

Cheers, 
Matthew 

 

 

Share this post


Link to post
Share on other sites

5 answers to this question

Posted · Report post

Hi Matthew,


The first thing you're going to need to do is change your layout, from fixed width to full width sections. Then you can inspect the elements you wish to add a background to, for example.

 

You're using the Branding section, so you can use the following CSS to add a white background to the branding section and make it look as though it is 100% width of your site.

 

 

#site .section-branding .texture { }

Share this post


Link to post
Share on other sites

Posted · Report post

I have changed the site layout to the one you suggested, now what?

Share this post


Link to post
Share on other sites

Posted · Report post

How do I extend the navigation bar?

Share this post


Link to post
Share on other sites

Posted · Report post

I think that I have done it. www.ijailbreakthis.com

 

What is the best way to display the ad in the header? Is there a better way than what I am doing right now?

Share this post


Link to post
Share on other sites

Posted · Report post

I've marked the topic as resolved.

 

If you have another question, please create a new topic.

Share this post


Link to post
Share on other sites