Jump to content

Archived

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

danieldynasty

How to increase NavBar height?

Recommended Posts

danieldynasty    2
danieldynasty

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
PeriniNero+    8
PeriniNero

danieldynasty what's the URL?

Share this post


Link to post
Share on other sites
batman    389
batman

Hi 

Try to add at "Custom Code"

 

 

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

Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
danieldynasty    2
danieldynasty

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
batman    389
batman

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

;)


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
mundocaco+    9
mundocaco

@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;
}
  • Like 2

Share this post


Link to post
Share on other sites
jacobtippett+    1
jacobtippett

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
Nicholas Kyriakides+    2
Nicholas Kyriakides

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?!

  • Like 1

Share this post


Link to post
Share on other sites
rztoler    2
rztoler

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

-Robert Toler

Share this post


Link to post
Share on other sites
rztoler    2
rztoler

Shillos,

 

Try This...

 

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

-Robert Toler

Share this post


Link to post
Share on other sites
Mike Becker    3
Mike Becker

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;
}
  • Like 1

Mike Becker 

 
 

 

Share this post


Link to post
Share on other sites
danieldynasty    2
danieldynasty

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
canadiangazelles    6
canadiangazelles

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
canadiangazelles    6
canadiangazelles

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.

Share this post


Link to post
Share on other sites
Erwan    37
Erwan

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.

  • Like 1

Share this post


Link to post
Share on other sites

×