Jump to content
vonsommerfeldt

Push all content down

Recommended Posts

vonsommerfeldt    1
vonsommerfeldt

I'm trying to find a way to push the content on ALL pages down, without effecting the nav. So if there are features, or boxes, or just text I want it further down the page in relation to the navigation.  Everything I've found on here just seems to deal with one aspect or the other.

 

Do I need to pad the navigation on the bottom? Or?

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi,

 

I apologise but I don't quite understand what you're trying to achieve, would it be possible to provide an image which displays the layout. Once we have this, we will be able to assist you further.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
vonsommerfeldt    1
vonsommerfeldt

In other words pad the navigation so that everything that appears beneath the navigation, on all pages, is about 20px lower than it already is

 

maybe 

 

#nav { padding: 0 0 20px }     ?

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there, rather than using the nav I would say try adding a top padding/margin to the #page-main container to get that affect.


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
vonsommerfeldt    1
vonsommerfeldt

Does that push EVERYTHING under the nav down? I think I tried that and for example on the home page where I have a features slider and then content underneath, it just pushed the content down 

Share this post


Link to post
Share on other sites
James B    436
James B

Well it depends what else you have in the header area of your site. If your nav is at the bottom of the header then the #pain-main container will push everything down from where the header ends. If you have other items in the header which are positioned under the nav then it will not affect them.

 

If that's the setup you have you'll need to see which areas are in the drag and drop in the header and then try to affect the css for the element below or by adjusting the bottom of the nav to get the desired affect.


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
vonsommerfeldt    1
vonsommerfeldt

Is there anything particularly wrong with padding the bottom of the #nav?

Share this post


Link to post
Share on other sites
James B    436
James B

Hi, no there's nothing wrong with applying padding to the bottom of the nav, if that's working for you on your site that's all good :-)

 

Just need to remember if you add anything to the header in future after the nav they'll be a gap between the nav and that item within the header section, so you'd need to adjust the css to apply on the lowest item within the header.


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
vonsommerfeldt    1
vonsommerfeldt

That's fine. I added blank links to the menu that lead nowhere (#) centered them, and the placed my logo on top of them, so the menu links are on either side of my logo or site branding. Hence why I had to bad the content down. Works good so far with #nav padding.

Share this post


Link to post
Share on other sites
James B    436
James B

Excellent, glad you got it working.


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

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


  • 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
    • lbhansen
      By lbhansen+
      I am slowly getting closer to something I like for the general appearance of my site. What's currently nagging me is trying to remove the top and bottom padding/margin from the image in the header. It seems that I've done what I want with the menu but there was dead space above the image and between the image and menu.
      Trying out padding and margin settings, I got something that came close to what I want but saw odd behavior along the way. Changing either the top or bottom padding to 0 (from blank), removed all padding from the top and sides but left a small band between the image and menu.
      Setting all eight padding and margin settings to 0 removed all except the band between image and menu. (But it seems that entering 0 in only the top or bottom padding option is all that was needed.)
      So, heading into the twilight zone, I changed the bottom margin to -1. That removed the band but allowed the menu to slightly overlap the image. AND, narrowing the browser, or viewing on a phone, caused the band to reappear.
      Perhaps there's also a problem with the menu but I don't see it.
      So that's where it stands at the moment: http://756.a44.myftpupload.com 
      I seems to me that if there is a default padding value, setting it to 0 should be all that's needed to get the two sections to meet perfectly on any device/browser width.
    • Perry
      By Perry+
      Hello There, 
      I am working with Platform 5 and have run into an unnerving problem. I am trying to position my clients picture along the bottom of the container, so that it sits right on the bottom. After a good hour of googling and messing with the CSS I figured I would ask the question here. Below is my screenshot displaying my problem. I will need to do this frequently in the future. 
      My Problem Image
      Unlike in DMS, when I add a margin to an embed or image box it simply makes the container larger while keeping the padding, I cannot have any padding or any space whatsoever on the bottom of my clients image.  Is there a way to remove all padding from the container so I can have this work across screen sizes? If not is there anyway to position an element directly at the bottom of another element in Platform 5? This seems like a basic feature and was easily attainable within DMS. 
      I cannot create an image combining all these elements as it will not scale well on mobile and will make my clients logo unreadable and her face incredibly small. 
       
      Thank you for any help,
      Perry
    • 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.
    • chamois_blanc
      By chamois_blanc+
      Hello,
      I am a bit confused about the usage of percentages for section padding/margin settings in the PL5 UI. Percentages don't scale well for mobile devices (especially in height), so those settings are pretty much useless. Case in point, the defaults are expressed in rem units, not percentages:
      .pl-sn-pad { padding: 1rem; ... } Why force the user to use percentages in the PL5 section UI when it would have been as easy to let the user specify the unit?
×