Jump to content


Photo
- - - - -
Resolved

Larger Size For Navbar

navigation

This topic has been archived. This means that you cannot reply to this topic.
11 replies to this topic

#1 mmandell

mmandell

    Member

  • Members
  • 15 posts

Posted 06 November 2012 - 12:11 AM

Hey Guys,

I am fighting with this and wanted to see if someone can help me.

Looking to make the header bar a lot taller and font larger in the header nav. The carousel below is easy to do, just the styling of the heading is frustrating me.

See attached example image.

Thanks,

Matt

Attached Files



#2 James B

James B

    Advocate

  • Members

  • 5126 posts

Posted 06 November 2012 - 04:34 AM

Hi there, you'd need to use custom css to do this. Try out the below

Please Login or Register to see this Hidden Content



#3 mmandell

mmandell

    Member

  • Members
  • 15 posts

Posted 08 November 2012 - 05:52 PM

James,

This puts us in the right direction by a long shot.

2 Questions:

1. How can I put the logo on the same line as the nav bar?
2. How can I center the text vertically?

Thank you for your help.

Best,

Matt

#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts

Posted 08 November 2012 - 06:53 PM

1. You'll need to reposition it using Custom CSS:

Please Login or Register to see this Hidden Content

More specifically, you can use the top margin property to do that:

Please Login or Register to see this Hidden Content

(increase the top margin of the logo).

2. To center the text vertically, you can probably just adjust the top or bottom padding (increase the top padding to move the text lower):

Please Login or Register to see this Hidden Content

There is a vertical-align CSS attribute, but I'm not sure that would work in this case.

#5 mmandell

mmandell

    Member

  • Members
  • 15 posts

Posted 08 November 2012 - 08:47 PM

Here's what I have, but the padding is not working. Is this a syntax error?

Please Login or Register to see this Hidden Content


Thank you for your help.

#6 James B

James B

    Advocate

  • Members

  • 5126 posts

Posted 09 November 2012 - 01:12 AM

Looking at the screenshot, the logo is in a separate container to the nav, so you'll need to use the correct selector for the logo in order for the css to take effect. To center the text you'll need to apply padding-top to the css code you'd got above, this will move the text down and you can align it in the center of the bar.

#7 mmandell

mmandell

    Member

  • Members
  • 15 posts

Posted 09 November 2012 - 02:22 PM

James,

What is incorrect about the padding code above? It feels like it should work assuming I am in the right container?
I am not sure what is going on to cause it to not work.

Are there basic CSS rules or laws that I am missing / breaking above?

Thanks,

Matt

#8 catrina

catrina

    Advocate

  • Members
  • 12345 posts

Posted 09 November 2012 - 03:42 PM

mmandell,

You cannot use a percentage in the padding (you added 50% padding in the CSS). You can only use pixels as shown here: 50px

#9 mmandell

mmandell

    Member

  • Members
  • 15 posts

Posted 09 November 2012 - 04:56 PM

Thanks, that solved it.

#10 catrina

catrina

    Advocate

  • Members
  • 12345 posts

Posted 09 November 2012 - 05:15 PM

The topic was marked as resolved.

#11 catrina

catrina

    Advocate

  • Members
  • 12345 posts

Posted 09 November 2012 - 05:15 PM

The topic was marked as resolved.

#12 catrina

catrina

    Advocate

  • Members
  • 12345 posts

Posted 09 November 2012 - 05:16 PM

The topic was marked as resolved.