Adjusting location of Site Logo

Support Area Forums Bottega Adjusting location of Site Logo

This topic contains 7 replies, has 2 voices, and was last updated by  Atit Patel 1 year, 5 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
URL to the page in question: http://http://new.kennyscateringco.com/wordpress
  • Author
    Posts
  • #36038

    Atit Patel
    Participant

    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.

    • This topic was modified 1 year, 5 months ago by  Atit Patel. Reason: Setting up notification email for myself
    #36053

    Bill Robbins
    Moderator

    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

    #36055

    Atit Patel
    Participant

    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!!

    #36057

    Bill Robbins
    Moderator

    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

    #36059

    Atit Patel
    Participant

    Nice!!!!

    #36096

    Atit Patel
    Participant

    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,

    #36097

    Bill Robbins
    Moderator

    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

    #36098

    Atit Patel
    Participant

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

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Adjusting location of Site Logo’ is closed to new replies.