Canvas Support

Header, Logo bg image

6 replies · opened Apr 4, 2016

RruumaApr 4, 2016

HI,
PFA for reference.

I am using demo construction theme, with a full width header. The logo part consists of background color. Instead of background color I want a background image as shown in the attachment. I tried inserting the background image, but unable to implement.
Right now I am working offline
Can you please help me out with this.

Thanks and Regards

RRohitApr 4, 2016

Hello,

We can surely provide you with the Code for this. But, before that can you please attach the Background Image here so that we can test this out on our Demos and then provide you with an accurate code. Thanks for your Patience.

RruumaApr 5, 2016

PFA background image for header and logo.
I have tried adding the image to the header, it is working but it disappears in the sticky menu. Moreover the Navigation at the bottom in the sticky menu shows a gap in between the logo and navigation.(Also attached normal.jpg and sticky-menu.jpg)

Lastly the logo is round and as mentioned in the documentation, the logo height is 100px. Still the logo coming down a bit.
Please help me out for this issue.

Thanks and Regards

RruumaApr 5, 2016

PFA normal.jpg and sticky-menu.jpg

SSemicolon WebSTAFFApr 5, 2016

Hello,

Please use the following CSS Code for applying the Background Image on the Header:

#header {
	background-image: url('images/header-bg.png');
	background-repeat: repeat-x;
	background-size: auto 100px;
}

#logo img {
	height: 70px;
	margin-top: 15px;
	margin-bottom: 15px;
}

This should definitely work fine.

Additionally, can you please send us the File to semicolonweb@gmail.com so that we can look into the issue the Menu Items. Thanks for your Patience.

RruumaApr 6, 2016

Hi,
Replaced the code to style.css
line no:939
#header {
background-image: url('images/header-bg.png');
background-repeat: repeat-x;
background-size: auto 100px;
}

and
#logo img {
height: 70px;
margin-top: 15px;
margin-bottom: 15px;
}
to line no:1031:- this is working

but the header part is not working.

I have sent you the Menu Items code on semicolonweb@gmail.com.

SSemicolon WebSTAFFApr 7, 2016

Hello,

We have gone through your Codes. You seem to be using the .style-4 Class on the Primary Menu which is currently not supported with the Construction Demo's Menu. You will need to use the following HTML code: 


	

		
		
			[
![attachment](demos/construction/images/logo.png)
Name of the Company](index.html)
			[
![attachment](demos/construction/images/logo@2x.png)
](index.html)
		

	

	

		
		

			

				

				
					
- [Home](#)
					
- [What we do](#)
						
							
- [Housing Management](#)
							
- [Construction Planning](#)
							
- [Green Homes](#)
							
- [Architecture Design](#)
							
- [Interior Planning](#)
						
					
					
- [About Us](#)
					
- [Projects](#)
						
							
- [2 Columns](#)
							
- [3 Columns](#)
							
- [4 Columns](#)
							
- [5 Columns](#)
						
					
					
- [Investors](#)
					
- [News](#)
					
- [Careers](#)
					
- [Contact](#)
				

				
				
					[](#)

Now, you can change the Primary Menu Item Styles accordingly.

Additionally, it is Highly Recommended that you do not Edit the style.css File or any of the Default CSS Files and instead use the css/custom.css File we have included in the Canvas 4 Package to modify and overwrite the Default Styles. This is particularly very useful when you need to Update Canvas to the Latest Version. Complete Usage Instructions regarding this can be found in the Documentation > Start > Customization Section. So, now you can add the above codes in the css/custom.css File and it should work fine.

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard