Jump to content

Archived

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

emilyf

Increasing the size of fixed navbar & contents (text & logo image)

Recommended Posts

emilyf

Hi there, 

My site is www.brianboggschairmakers.com/newbuild.  If this question has been answered before, please excuse me! I just haven't found someone else with my exact problem - or perhaps I am making the changes in the wrong place.

I have been looking to increase the overall size of the fixed navbar and its contents. I want the menu text and the logo image to be about 1.5% bigger, and to remain vertically centered in the fixed navbar.

I was able to increase the height of the fixed navbar by adding the following to my custom CSS (wordpress dashboard > Appearance > CSS stylesheet editor):

section-navi .navi-wrap {
    height: 80px;
}

BUT, I am stumped as far as how to increase the font size of the menu, how to increase the size of the site logo, or how to keep it all vertically centered! As far as font size goes, I tried adding the following to my custom CSS, but nothing's happening.

.navbar .navline > li > a {
    font-size: 20px !important;
} 

 

Your help is much appreciated!

Share this post


Link to post
Share on other sites
batman

Hi emilyf

Please, you can try with for example

.section-navi .navi-container {
  height: 36px;
  padding: 7px;
  padding-top: 25px !important;
}

.section-navi .pl-nav > li > a {
  line-height: 50px;
  padding: 13px;
  opacity: 0.7;
  font-size: 20px;
}

fieldset {
  padding: 0;
  margin: 0;
  border: 0;
  padding-top: 13px;
}

 


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
emilyf

I never thought there would be a point in my life where I got to say "Thank you, Batman!" but here it is.

It was exactly what I needed, thank you so much. 

Share this post


Link to post
Share on other sites
batman

:)

No problem, I´m glad to help you


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites

  • Similar Content

    • Borries
      By Borries+
      I know this is not an easy problem. Maybe there is a easy solution.
      I have tryed to uses the existing solution, that I have found in the forum
      I changed the colours of my nav (simple nav) and the hover effect (a. hover).
      I really tryed to highlight the active/used link in the nav but I cant figure it out.
      I want it to be black when active.
      Any help would be appreciated. Thanks.
      http://www.marcborries.de  nav link: "Sinn & Selbst" 
    • 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
    • pehja
      By pehja+
      It would be nice to have an option in the impuls section to only view hamburger menu.  That or let nav pro have that option ad also transparent background. Impuls is a great section. Love it.
    • catalinam
      By catalinam+
      Hi lovely Pagelines Forum Helpers!
      I am new to Pagelines as well as coding in general so sorry if this is stooopid. 
      I am reimaging my site www.theunimpossibles.com and I am trying to do a few seemingly simple things using paleness and modifying the lynette theme.
      How do I put a fine key line on the bottom of the dropdown nav? e.g. <hr style="height:1px;border-width:0;color:#e4e4e4;background-color:#e4e4e4”> I want a second nav in grey to site above it but I can't get the grey to go all the way to the top and full width. Is it possible to put social icons in the nav too? How can I make these two nav global but underneath the slider as per below only on the homepage? Is it possible to embed the royal slider onto the homepage? e.g putting the shortcode [new_royalslider id="4"] in the embed area generates the error: [RoyalSlider Error] Incorrect RoyalSlider ID or problem with query. Is it possible to make the slider, the instagram feed and the hero image on the blog posts full bleed? On the category page e.g http://theunimpossibles.com/category/recipes I would like to change "Posts  Currently viewing the category: "OM NOMS"" to be bigger, centred, and with more padding and only show the words "TOPIC: OM NOMS". Is it possible to remove the extract and put the date underneath similar to:  http://grittypretty.com/category/makeup/? Is it possible to make the post images on the blog posts wider and the text smaller? http://theunimpossibles.com/2015/06/30/amazingly-delicious-paleo-orange-blueberry-almond-meal-scones-with-earl-grey-cashew-cream/?pl_edit=on e.g the blog posts similar to http://grittypretty.com/makeup/the-top-6-office-beauty-must-haves/?  Obviously keeping everything responsive!
      I have been trying to Google all of this but alas I am very very stuck and would appreciate any help!
      Kindest,
      Catalina
       
    • richardjacruz
      By richardjacruz+
      I'm building a site at:
      http://dev.stevensoncraneservice.com/
      and I followed the instructions on building a "branding" area in the header:
      http://docs.pagelines.com/tutorials/creating-a-branding-area
      But, if you see the image I've attached, you'll see that there's a lot of space between the nav and the slider. Is this something I need to control with CSS in the Custom code section, or is there something else I can do that's part of the header section?

      Actually, what would also be nice is if I could put a divider line there... like an orange or a light gray.
      Thanks.
×