Jump to content

Archived

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

robwahl

image/logo beside menu in header

Recommended Posts

robwahl

Hi,

I'm new to Wordpress and to Pagelines/DMS.  I'm trying to create a new site for my business and was hoping to have, in the header, my logo appear on the left and the nav menu on the right.  That part is easy.  I'm using NavBar for the menu.  The problem is that no matter what I try, I can't seem to get the menu centered vertically next to the logo.  The menu always seems to float either near the top of the logo or near the bottom of it, but not centered vertically beside it.  I'd like to have it centered.  I've been using the MediaBox for the logo.  I've tried putting the MediaBox next to the NavBar in a regular section area as well as within a 2 Column, but no matter what I try I can't seem to get the vertical centering right.  Is there some other way I should be inserting the logo image instead of using MediaBox? It's frustrating because the MediaBox area seems to have a minimum height which is much taller than my logo.  If I could just shrink the MediaBox height I could get it so that the logo and menu appear vertically beside each other, but at it is, the logo seems to always appear either floating above or below the menu, depending on how I set it up.

 

Any tips would be greatly appreciated.  Thanks!

 

Share this post


Link to post
Share on other sites
click

To answer one of your questions, you can set the "min height" of the media box to whatever you like.  That setting -  "MediaBox Min Height" is located in the "media box display" section of the Media Box editor.

 

A link to your site would be helpful to see exactly what is going on.  

Share this post


Link to post
Share on other sites
robwahl

Thanks for the reply.  I tried that option but even when set to '0' or '1' there still seems to be a lot of extra height to the box.  Here's the link:  http://www.symbolstutoring.com/ .  What makes sense to me is to have a 2-Column set up in the header, and have the logo in left column (in a MediaBox?) and the menu in the right column.  That's how I have it right now, but notice how the menu seems to float above the logo.  I'd like the menu to be vertically in line with the logo.  Thanks again.

Share this post


Link to post
Share on other sites
seanocaside21

Thanks for the reply.  I tried that option but even when set to '0' or '1' there still seems to be a lot of extra height to the box.  Here's the link:  http://www.symbolstutoring.com/ .  What makes sense to me is to have a 2-Column set up in the header, and have the logo in left column (in a MediaBox?) and the menu in the right column.  That's how I have it right now, but notice how the menu seems to float above the logo.  I'd like the menu to be vertically in line with the logo.  Thanks again.

 

Having the exact same issue here! Thought it might be a padding / margin issue with the media box but i can find anything on inspection.....

 

For me there is far too much "dead space" at the base of the media box and is forcing my NavBar down the page. I have attached a screenshot of my visual editor which clearly shows the outline of the media box.

 

Maybe there is a DMS developer out there that has a solution. 

 

Thanks,

 

Sean. 

Share this post


Link to post
Share on other sites
click

Thanks for the reply.  I tried that option but even when set to '0' or '1' there still seems to be a lot of extra height to the box.  Here's the link:  http://www.symbolstutoring.com/ .  What makes sense to me is to have a 2-Column set up in the header, and have the logo in left column (in a MediaBox?) and the menu in the right column.  That's how I have it right now, but notice how the menu seems to float above the logo.  I'd like the menu to be vertically in line with the logo.  Thanks again.

 

A few things that might help.  Your logo has 20px of white space surrounding the logo as part of the image.  Attaching screenshots of css inspector, as you can see, there are a few classes adding margin and padding to your media box.  use the custom css/less editor to override. 

Share this post


Link to post
Share on other sites
scientistsofmedia

I've added my logo in a media box per danny's instructions.  I too have extra space added above the logo file.  when I view in Firebug, I am seeing that an inline margin style is being added to the element:

 

element {
    margin-top: 34.5px;
}

 

here is a screenshot:

http://scientistsofmedia.com/extraspace.png

 

per Click's suggestion above: "use the custom css/less editor to override."  can I override the inline style being added from within the custom css/less editor? 

Share this post


Link to post
Share on other sites
Rob

@seanocaside21  your screenshot is in edit view.  How does it actually look in another browser not logged in?


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

×