Archived

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

  • 0

Resolved Larger Size For Navbar


Question

Posted · Report post

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

post-13595-0-44933100-1352160661_thumb.p

Share this post


Link to post
Share on other sites

11 answers to this question

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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


.navbar.navbar-content-width {

    border-radius: 4px 4px 4px 4px;

    font-size: 14pt;

    min-height: 80px;

}

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks, that solved it.

Share this post


Link to post
Share on other sites

Posted · Report post

The topic was marked as resolved.

Share this post


Link to post
Share on other sites

Posted · Report post

The topic was marked as resolved.

Share this post


Link to post
Share on other sites

Posted · Report post

The topic was marked as resolved.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

1. You'll need to reposition it using Custom CSS: http://www.pagelines.com/wiki/Custom_CSS. More specifically, you can use the top margin property to do that: http://www.w3schools.com/css/css_margin.asp (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): http://www.w3schools.com/css/css_padding.asp. There is a vertical-align CSS attribute, but I'm not sure that would work in this case.

Share this post


Link to post
Share on other sites

Posted · Report post

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


.navbar.navbar-content-width {

  background-image:url('/wp-content/uploads/2012/11/nav_background.jpg');

  border-radius: 12px 12px 12px 0px;

  font-size: 14pt;

  min-height: 60px;

  padding-top:50%;

}

body{}

Thank you for your help.

Share this post


Link to post
Share on other sites