• 0

How to increase NavBar height?

Question

Posted · Report post

A second installment to my "how to" questions haha (first one being making iBox Icons clickable).

 

How can we increase the navbar height and have the menu links and search icon vertical-align bottom? The logo is too small with just a 29px height.

 

I have found that adding custom CSS can increase the logo image and NavBar height but the content links are not aligned correctly (either middle or bottom is preferred but it has defaulted to top aligned) and the search icon seems to be separate CSS class.

 

The following custom CSS increases the NavBar height and logo height by double.

 

.navbar .plbrand img {
  max-height: 58px;
}
.navbar .plbrand {
  float: left;
  margin: 4px 2% 4px 0;
  padding: 0 1%;
}

 

Thank you for your kind efforts everyone!

Share this post


Link to post
Share on other sites

14 answers to this question

  • 0

Posted · Report post

danieldynasty what's the URL?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi 

Try to add at "Custom Code"

 

 

.navbar {height: 8em;}
 
You can change #em as you need

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hello Batman,

 

Gotham needs you, now more than ever.

 

.navbar {height: 8em;} does not work. It makes the navbar plus a whitestrip height increase too. And it seems the content part/links does not increase with the size :(

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi again

Gotham needs you, now more than ever.

:D 

 

Please, you can post your site's url so to see it I can properly troubleshoot the issue for you.

 

You remember that I´m a user like you, so I´m trying to learn helping

;)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@danieldynasty  try something like this

 
.navbar {
    padding-bottom: 25px !important;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 25px !important;
}
 
.navbar .plbrand img {
    max-height: 150px;
}
2 people like this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi,

 

Just tried mundocaco 's code and it worked great... for the most part.

 

If I want it to default to the bottom (or even center) instead of the top and increase the size, how might I go about that?

 

Currently: [attachment=1271:Screen Shot 2013-08-05 at 10.31.47 AM.png]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Great mundocaco! Thanks it worked for me too! But is there a way also to increase a bit the font size of my menu? or is that part belong somewhere else?!

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted (edited) · Report post

Shillos,

 

Try This...

 

/*header logo size*/
.navbar .plbrand img {
     height: 112px;
     max-height: 125px;
}
/*center nav*/
.navbar .navline {
     padding-top: 40px; 
}
/*increase text size*/
.navbar a {
  font-size: 16px;
}
 
 
Here is the result... (I've been playing with the framework on this domain)
 
screenshot.png
Edited by rztoler

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Shillos,

 

Try This...

 

/*header logo size*/
.navbar .plbrand img {
height: 112px;
max-height: 125px;
}
.navbar .navline {
  padding-top: 40px; 
}
 
.navbar a {
  font-size: 16px;
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Here's some code I like to add if you wanna use a brand logo in the NAVBAR with the Pagelines Base NavBar CSS theme:

 

.navbar.pl-color-base .navline > li:hover > a, .navbar.pl-color-base .navline > li.current-menu-item > a, .navbar.pl-color-base .navline > li.dropdown.open > a {
color: #000000;
background-color: #FFFFFF;
box-shadow: inset 0 -5px 0 #F04831;
font-weight: 800;
margin-top: 7px;
color: #4B4B4D;
}
 
.navbar.pl-color-base .navline > li > a {
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-ms-transition: all 0.1s linear;
transition: all 0.1s linear;
color: #4B4B4D;
font-weight: 800;
font-size: 17px;
margin-top: 7px;
text-shadow: none;
}
 
.navbar .plbrand img {
max-height: 50px;
position: relative;
display: block;
float: left;
background: #fff;
border-bottom: 0px solid #ddd;
box-shadow: 0 0 0 rgba(0, 0, 0, 0.1), 0 0 0 rgba(0, 0, 0, 0.1), 0 0 0 rgba(0, 0, 0, 0.1);
}
 
.navbar.pl-color-base .navline > li > a:hover {
color: #F04831;
}
 
.navbar.pl-color-base .navline > li.current-menu-item > a {
color: #F04831;
}
1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Works great! It does not include the search "magnifying glass" icon though. Any ideas on how to make that bottom align as well?

 

 

 

Shillos,

 

Try This...

 

/*header logo size*/
.navbar .plbrand img {
height: 112px;
max-height: 125px;
}
.navbar .navline {
  padding-top: 40px; 
}
 
.navbar a {
  font-size: 16px;
}

 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Sorry for the basic question but I'm having the hardest time trying to figure out which file to apply these suggested updates to. Can someone please point towards the directory and file that would likely contain the navbar configs for a child theme that's installed on top of DMS?

Thanks in advance,

Rick

Share this post


Link to post
Share on other sites
  • 0

Posted (edited) · Report post

I don't know how to delete the post above; just wanted to update to say that I find out how to do this. I pasted the code into the "Custom Code" section and voila :) Thanks to those who posted solutions above; they were very helpful to tinker with and learn from.

Edited by canadiangazelles

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi canadiangazelles,
 

If you use a child theme, you can by construction use the three DMS customization methods (DMS doc: http://docs.pagelines.com/customize/how-to-customize). Let's take this NavBar styling code as an example:

  • if you want to have it applied to all your themes ("main DMS" theme, your DMS child theme(s)), put this code in DMS Toolbar → Custom Code → Custom LESS/CSS tab (DMS doc: http://docs.pagelines.com/customize/dms-customize-options);
     
  • if you want it applied only to your child theme, put this code in your wp-content\your-dms-child-theme\ style.css or style.less file (DMS doc: http://docs.pagelines.com/customize/base-child-theme);
     
  • more tricky though useful, but not recommended unless you're an "advanced" user and have a good CSS knowledge: you can put some "global" code in the CSS tab (for instance CSS for paddings) which will apply to all your DMS themes - main & child -, and some "child code" (for instance CSS for colors) in your child theme dir. CSS or LESS file --> all your DMS themes will have the same NavBar paddings, and you can have a "Blue NavBar" child theme + a "Green NavBar" child theme". See what I mean? If not, forget it:)!

Hope it will help.

1 person likes this

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