Jump to content
Sign in to follow this  
mmandell

Larger Size For Navbar

Recommended Posts

mmandell    1
mmandell

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
James B    436
James B

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;

}


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
mmandell    1
mmandell

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
catrina    103
catrina

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.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
mmandell    1
mmandell

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
James B    436
James B

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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
mmandell    1
mmandell

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
catrina    103
catrina

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


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

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

Sign in to follow this  

  • Similar Content

    • bnapoli
      By bnapoli+
      http://731.34b.myftpupload.com/ this website is using the NavPro navigation in Platform 5. It has a lot of menu items, so it breaks to two lines when the window is sized down. What is the media query to make the navigation either a) switch to "mobile mode" at a higher width, or b ) expand the nav into two lines. Thanks
    • nadielp
      By nadielp+
      Hi Everyone,
      I am trying to get a single navigation item to center. I am using a scroll menu in the navigation component of Impulse. I would like to have the item in the center of the page but it defaults right. I tried setting the item to center a few different ways and nothing is working. I added {
        display: inline-block;
        position: relative;
        text-align: center;
      }
      but that didn't work...any help would be appreciated. Site is at http://vetpaw.org/new
       
      Thanks!
      Daniel
    • yemoonyah
      By yemoonyah+
      I just installed and added the Flipper section to my home page and it makes my navigation/menu bar items disappear.
      They do show up again when scrolling down and everything seems normal on the other pages.
      http://yemoonyah.com
      Thanks.
       
    • Houston Haynes
      By Houston Haynes+
      I'm still "piercing the veil" of platform 5, with page navigation the current subject of interest. I worked with a few plugins (the most useful being Next Page Not Next Post) but I wanted to take a step back and start with an example - and see if I could get a bit of help "inside the beltway". 
      What I'm looking to do is substantially similar to the pagelines docs pages - see my annotated screenshots attached. At the top of a "child" page I want a link back to the "parent" page - and at the bottom of that "child" page I want to place a similar link to the "grandchild" page. At the bottom of each grandchild page I want there to be navigation "buttons" to sibling pages in the hierarchy. 
      "Next Page Not Next Post" handles what I'm expecting for "sibling" navigation, but I'm having a bit of trouble getting over the logistical hump of applying that functionality to my page "Template C" instance only. And per the attached examples, while researching how to solve this problem I see on the Pagelines site *itself* that the navigation elements are in place - and I especially like the oval button formatting of the sibling page navigation.
      So - really, my question is two-part:
      Are there plugins/code snippets/tutorials/threads here that show how Pagelines achieved their page hierarchy nagivation, and  Is there a tutorial (or advice from generous contributors here) on how to use the PHP templates to override the content portion of the page to add the navigation elements? Thanks in advance!


    • hungryitalian
      By hungryitalian
      What is the equivalent to DMS2's PostNav section in PL5?  I'm looking for PREVIOUS/NEXT buttons that show the associated post names for the previous and next posts.
      Thanks,
      J.D.
×