19 replies to this topic

[fpcas9431]

Does anyone know how to tighten the space between the Nav Bar and something I want to place above it or below it. Currently it seems to be around half inch and I would like to bring that down drastically. How do I change the pxl count above (as I can with Banner Ads)

 

Any thoughts?

 

Notes: Working image attached: I would liket to bring that space between the Logo (Banner) and the Nav bar in tighter.

 

Please Login or Register to see this Hidden Content

Attached Files

•  Navbar copy.tiff   244.54K  0 downloads

[batman]

Hi again, if i understand you...

You can try add in

PageLines > Site Options > Custom Code > CSS Rules

or in

Pagelines Customize (plugin)

 

Please Login or Register to see this Hidden Content

You can change #px as you like

It is advisable to learn how to do this on your own too.  

Check out 

Please Login or Register to see this Hidden Content

 

If you need more CSS help, make sure you've downloaded Firebug for Firefox

and check out W3 Schools for more info. 

Please Login or Register to see this Hidden Content

[Danny]

Did Batman's suggestion above, resolve your issue ?

[fpcas9431]

Batman got me to find plugins and sleuthing to find Inspector in Safari. I'm a Mac user, not that it should matter. So now I have found the code. ( I will say this is approaching over my head, but hopefully with your more experienced help perhaps I can make this work.)

 

When I delve into CSS code, I Find this code in this section (screen shot attached now to original post). I see no pxl area to adjust?

 

Thoughts?

 

 

 

jQuery(document).ready(function(){

    

    var a = 1

    

    // Do this for every drop down

    jQuery(".pldrop > li > ul").each(function(){

        

        var b = ""

        

        jQuery(this).addClass("dropdown-menu");

        

        if( jQuery(this).siblings("a").children(".caret").length===0 ){

            b = ' <b class="caret"/>'

        } 

        

        jQuery(this).siblings("a")

            .addClass("dropdown-toggle")

            .attr( "href", "#m" + a )

            .attr("data-toggle","dropdown")

            .append(

            .parent()

            .attr( "id", "m" + a++ )

            .addClass("dropdown")

 

 

file://localhost/Users/Frank/Desktop/Navbar%20copy.tiff

 

        

        jQuery(this)

            .find('.sub-menu')

            .addClass("dropdown-menu")

            .parent()

            .addClass('dropdown-submenu')

    })

    

    jQuery(".dropdown-toggle").dropdown()

 

})

 

jQuery(document).ready(function(){

    touchFix();

}); 

 

function touchFix(){

    jQuery('body')

        .on('touchstart.dropdown', '.dropdown-menu', function (e) {e.stopPropagation();})

        .on('touchstart.dropdown', '.dropdown-submenu', function (e) {e.preventDefault();});

}

[Danny]

The code you have provided above is Javascript, you simply need to change the CSS. I have provided you with a link to our Custom CSS documentation which should assist you

 

Please Login or Register to see this Hidden Content

[fpcas9431]

So if I understand you and Batman at this point: Batman posted this:

 

 

1

2

3

4

.section-navbar .content-pad {

    padding-top: 25px;

    padding-bottom: 25px;}

 

Do I simply insert the above in CSS section: See attached photo and adjust px as I choose. Or do I have to 'find this code' somewhere else and adjust it there. May be a newbie question, but I don't wish to throw away all the work I've done so far.

 

Attached is screen shot of where I 'think' this might go. And to be clear I wish to tight the space between NavBar and bottom of logo: www.newsite.thetradinglab.com which is showing on my screen as .5 inches or better right now.

Attached Files

•  CSS1.tiff   109.34K  6 downloads

[Danny]

The Documentation I linked above, has all the information you need, I suggest you give it a read and at the bottom there is a step by step guide with image showing you how to target a specific element and make changes to the custom before adding it your site.

 

I highly recommend you install Google Chrome if you haven't already and use Chromes browser web dev tools, as in my opinion its the easiest to use.

[fpcas9431]

I will have a read through it when I have some time: Thank you. Please understand I am not looking to become a 'web developer' I am simply trying to create one site for our company, using page lines to hasten the learning curve.

 

In short I'm looking for the simple code that plugs in where to take the distance down between those two objects. I could do it with banners easily and took that to minimums: NavBar, well that is proving to be much more time consuming. Is there another NavBar which allows me do shorten this distance without spending that much time on the research?

[Danny]

Add the following to your custom CSS and view the code I have used and try to see what I have using Firebug or your browsers web developer tools, so you can use it for future reference.

 

 

 

Please Login or Register to see this Hidden Content

However, the problem you have is that you're using the banners section in a way it wasn't designed for. The Banners section is supposed to be used to display text and an image, you have added HTML throughout your banners content. I would recommend using a completely different section such as the ContentBox or one of the Sidebar sections and add your HTML to a text widget.

 

I would also recommend you review our Grid documentation as it may assist you with your HTML structure.

 

Please Login or Register to see this Hidden Content

[fpcas9431]

Thank you: I am still unclear as to 'where I enter this change. Is it in the .tiff file that I send in...i.e. CSS coding in PageLine? or do I cut that right into the code itself. I'm using Safari developer Inspector to show me the code.

 

Also I've found the following. It appears that its more likely to be body.navbar.fixed.page canvas which is showing .50px and/or the next one at .42 pxls. .section-navbar.content-pad is showing 5pxls and my screen is showing a much greater distance there.

 

Here is CSS I copied over from compiled CSS

 

body.navbar_fixed .page-canvas {

  padding-top: 50px;

}

body.navbar_fixed .fixed_width #page .page-canvas {

  margin-top: 42px;

  padding-top: 0;

}

.section-navbar {

  z-index: 2020;

  margin: 0 auto;

  width: 100%;

}

.section-navbar .content-pad {

  padding-top: 5px;

  padding-bottom: 5px;

}

.section-navbar .content-pad .navbar-content-pad {

  padding: 0 15px;

}

.section-navbar.fixed-top {

  position: fixed;

}

[Danny]

When adding custom CSS, you have three options where you add your code. I have provided you with a link to our documentation on these customisation methods, which should assist you.

 

Please Login or Register to see this Hidden Content

 

On the documentation there is also a step by step guide on how to inspect elements and make changes to the code.

[fpcas9431]

Thank you. I will look through this carefully and have added them into my console; Now for clarity, your note earlier suggested adjusting .section-navbar .content-pad. You can see by my previous note that only seems to have 5pxls and clearly the space I'm trying to tighten is greater than this. I certainly don't wish to add to my problems by adjusting the wrong line: Code that I can see is copied again below: Which is the correct one to bring into 3-5pxls and tighten this up?

 

 

body.navbar_fixed .page-canvas {

  padding-top: 50px;

}

body.navbar_fixed .fixed_width #page .page-canvas {

  margin-top: 42px;

  padding-top: 0;

}

.section-navbar {

  z-index: 2020;

  margin: 0 auto;

  width: 100%;

}

.section-navbar .content-pad {

  padding-top: 5px;

  padding-bottom: 5px;

}

.section-navbar .content-pad .navbar-content-pad {

  padding: 0 15px;

}

.section-navbar.fixed-top {

  position: fixed;

}

[Danny]

I mentioned above that your issue isn't a CSS only related issue, you're using the Banner section in a away that it wasn't designed for. The Banner section is supposed to used house both text and image, you're using it to display multiple lines of text in different positions.

 

I recommend you read through my suggestion above regarding the PageLines Grid and use the ContentBox or Sidebar section.

 

 

If you prefer the look you have achieved with the banner section then you can reduce the padding on the banners section. I recommend using Firebug or your browsers built-in web dev tools and inspect the banner sections content-pad element to find the correct code.

 

For assistance visit our custom CSS documentation - 

Please Login or Register to see this Hidden Content

[fpcas9431]

Will Do thank you: I am going to run with this for now. I will look at your suggestions, and also follow through a 'child' banner as this might have the advantage of keeping the work I've done, and not worrying about updates. Would you agree?

[Rob]

If a child section is added properly to a child theme, it's secure.  Added to the wrong place and there's no assurance.  Danny's provided you documentation, which is not intended to train you in coding, but in use of the Framework.

 

I must point out however that the forum is not here to provide customization analysis or support.  We're here to guide you to resources.  We are not developers or coders, and code pasted here will not be read by a developer. We thus recommend you read all the documentation and welcome your requests for guidance and recommendations to resources you may use for your customization.

[fpcas9431]

And I thank you and Danny: There is such a huge amount of information to surf through to make a change it can be overwhelming to the newbie here.

We are building a web site; it is coming along. And I absolutely appreciate everyone's help this far.

 

There will be an end to silly simple questions soon as we go live: Just a few more pages!

 

Best

F

[Rob]

I assure you my friend that it's quite possible to use PageLines to create a fantastic looking site in a matter of minutes.  Customization however, requires some skills and learning time.  We provide many well written pages of documentation.  You don't need to read the whole thing, but it's important to browse it to find the information for anything you're working on.  I also assure you that you may use the framework quickly, even with basic customizations.

 

We're here and able to point you to things, explain how things work, but we can't validate code.  On that, there's a CSS validator here:

Please Login or Register to see this Hidden Content

.   Use the Direct Input tab and paste any CSS to validate it.  It's a great, quick and free tool that makes sure you've not made a typo or messed up the CSS in any way.

[fpcas9431]

Hello There: I have read through this and various pieces several times. Here is my synopsis. Bear with me it's the last thing that needs to be fixed before going live. Every thing else is pxls and tweaks.

 

Of note: I used Banner  vs. content box for several reasons: I needed it in the head, there are only so many options available there. The video's i watched during setup used Banner in the header, and as a marketing guy for 30 years...that's where the logo goes.

 

 

To tight the space between the Nav. Bar and Banner. I see this in CSS area The professional way to customize your site is using a child theme, or customization plugin

 

I have started going through the material you've provided me. There is no reference to plugins specifically. The ones that are mentioned may or may not work with this theme and/or with Pagelines and/or may or may not be tested with this theme and/or with this version. So I do believe it is a bit unfair to ask the client to surf through a sea of plugins which may or may not work for a specific purpose. 

 

Also on the child theme: There is mention above on this. Other than one paragraph descriptions I have been unable to find any step by step instruction on how to duplicate the banner theme and then shift it's padding.

 

So in short:

Can you direct me to the fuller documentation step by step on creating a child theme for banner or NavBar which ever is more is going to get this done fastest. 

 

or

 

A plugin which works with this theme and WP and is tested and doesn't push it back to the client to figure that out. Really would be useful.

 

Having said this: You have all been a big help and the site is almost finished. Really do need to tighten up this header/nav bar thing easiest way possible and in a way that future updates don't overwrite it.

[Danny]

The simplest way to create a child section is to follow the instructions given here -

 

Please Login or Register to see this Hidden Content

[fpcas9431]

Uncle: Thank you for your help. This one was beyond me and I hired Jimmy from your site to get it done. Looks great. Much appreciated