• 0

DMS 2 Bottom align top nav bar to the baseline of my logo


Question

Posted · Report post

I would like to bottom align the nav bar to the baseline of my logo - attached is a screenshot of the logo on the left, nav bar on the right.

 

Thanks for your help!

Share this post


Link to post
Share on other sites

4 answers to this question

  • 0

Posted · Report post

Hi David, 

I do not see an attached screenshot, just an fyi

 

If I am understanding correctly you want to have your logo on the top and your navbar directly below, you should be able to accomplish this by adding the sections for your branding and navigation seperately.. one on top of the other...

If you provide more info and a link to your site you will probably receive more detailed help to accomplish what you want :)

 

I hope this helps :)

 

Cre8ively,

Cassey

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Cassey,

 

D'oh!  OK here is a screen cap of the logo and navbar - http://www.davidcosgrovesandbox.com/dfx.png - the site is still in development and hidden.  I can set you up with login credentials if you'd like.

 

I want the logo to remain in its place, the nav bar on the right is now top-aligned in relation to the logo - I want the nav bar to be aligned so it's bottom aligned to the baseline of the logo.  I want the nav bar to remain in its place as well, just align it so the baseline aligns with the logo's baseline.

 

Thanks so much for your help :-)!

 

David

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi David, 

 

Thank you for the more detailed description. 

 

I don't believe Vertical Alignment will work if you have these set up using 2 different sections because they don't share a relationship to each other. To use vertical alignment you would need the two elements to be contained together sharing a dependent relationship. For example a table would work with the logo in the first cell and the menu in the second cell (not easily accomplished using sections though) and the vertical-alignment set to bottom...

 

This would actually be a good idea for a new branding section in the pagelines store or additional option for the current branding section.

 

>> Two ways you can accomplish an imperfect version of what you want using 2 sections on the same row... CSS 

 

apply padding-top to the navbar

or

apply position:relative and top:XXpx; to the navbar

 

The css fix won't display 100% perfectly on all page sizes because your logo is likely responsive...

 

I hope this helps :) 

 

Cre8ively,

Cassey

 

** There may be a way to vertical align 2 sections that I am unaware of, if there is I would be happy to learn the technique as well :)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You can achieve this by either increasing the line-height on the navs li a or adding padding-top and padding-bottom.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now