Adjusting location of Site Logo

[Atit Patel]

Hi Bill,

I am working with Bottega template. I have created a site: http://new.kennyscateringco.com/wordpress.

Would appreciate your help with following two things:

1) I want to place the logo of the site in the middle of the page and menu links to either side of it. Similar to http://sujuscoffee.com/. If you can please help me.

2) Also, the logo is getting too close to the title text on the internal pages. For example: http://new.kennyscateringco.com/wordpress/locations/. Also attaching a PNG file to show the problem. Is there a way to lower the text slightly. This is a concern only on desktop browsers. On mobile this works just fine.

Attachments:

1. 

   Screen-Shot-2016-03-26-at-9.59.44-AM.png
   

[Bill Robbins]

Hi Atit,

You can do that. Add this to the Custom CSS box that’s in the advanced tab of your theme options page:

@media only screen and (min-width: 1024px) {

	#logo {
		left: 0;
		right: 0;
		text-align: center;
	}
	
	#navigation {
		left: 10%;
		right: 10%;
		margin-top: 0;
		top: 56px;
		position: absolute;
		width: 80%;
	}
	
	#navigation ul#menu-top-menu {
		width: 100%;
	}
	
	#navigation li#menu-item-70,
	#navigation li#menu-item-124 {
		float: right;
	}
	
	#content {
		padding-top: 45px;
	}

}

If you have any questions or run into trouble, let me know.

Have a great week,
Bill

[Atit Patel]

Hi Bill,

Many Thanks!! Great start to the week already :-). We are almost there. The logo is still placed at the top (as viewed in a desktop browser). I would like to lower it by few pixels. Attaching a picture to show the gap that needs to be increased.

http://new.kennyscateringco.com/wordpress/

Many Thanks again for all your prompt help!!

Attachments:

1. 

   Screen-Shot-2016-03-28-at-9.56.28-AM.png
   

[Bill Robbins]

Hi Atit,

Glad that almost where you want to go. You can adjust the vertical position of the logo. In the snippet above, find this style:

#logo {
	left: 0;
	right: 0;
	text-align: center;
}
	

You can add a top value to it like this:

#logo {
	left: 0;
	right: 0;
	top: 10px;
	text-align: center;
}

which would move the logo down 10 pixels from the top. Feel free to adjust those values to get the fit you’re looking for.

Bill

[Atit Patel]

Nice!!!!

[Atit Patel]

Hi Bill,

Actually one more follow-up request. I tried changing the top level menus (Added ‘Locations’ link) and the menu layout changed. Link to site: http://new.kennyscateringco.com/wordpress/

Is there any way I can bring ‘Location’ link to the right side of the logo.

Much appreciate your help.

Thanks,

[Bill Robbins]

Hi Atit,

Unfortunately, this change is very custom and specific to these exact menu items. If you have any other changes to the menu go on and make them and I’ll show you how to alter the code for the final version of the menu.

Thanks,
Bill

[Atit Patel]

I see….Ok….then let me finish making all changes and will ping you once I am done for the most part.

[Author]

Posts