Jump to content
lukee

Too Much Space Between Brandnav And Content

Recommended Posts

lukee    0
lukee

Hi there,

No matter what I use (only Branding, or BrandNav, or only Classic Nav) there's an awkward space between the header and the quickslider below it on the main page. It exists on the other pages as well but it's less noticeable since there's a PageInfo to break the seam.

My logo is a transparent .png, and does not have extraneous pixel space surrounding the image. I've looked up and tried to fix this based on similar issues in the forums, but to no avail.

Here is all the custom CSS i've entered hoping to fix the various configurations:

#branding {.mainlogo-link, .mainlogo-img{margin:0 auto;float:none;}}

/* Centered Navigation */#page { #navbar, #nav{ .navline, .main-nav{ float:none; text-align: center; li { display:inline-block; float:none; text-align:center; a { float:none; text-align:center; } } } .dropdown-menu { text-align:left; } }}/* Centered Navigation Media Query*/@media(max-width:767px){body.pagelines { #page { #navbar { .navline { float:none; text-align:center; li,a { display: block; float: none; text-align: center; } } } } } }

span.c_img:hover {.transform(-5deg);.transition(all 0.2s);}

ul.menu-always-on-top li ul li a {padding: 10px 0 0 0px; text-align: center;}

/* CSS FOR NAV BACKGROUND COLOR */ #primary-nav .content { background-color: #000000; }

/* THIS WILL CHANGE THE FONT COLOR IN THE NAV */ .main_nav li a { color: #000000 !important; }

/* Centered Navigation Media Query*/@media(max-width:767px){body.pagelines { #page { #brandnav { .brandnav-nav { float:none; text-align:center; li,a { display: block; float: none; text-align: center; } } } } } }

Sorry about it being a lot.

Secondly: BrandNav, when viewed on my iPad, split up. The logo was staggered above the nav bar, which was shuttled all the way to the right. I'd like a way to fix this too, if possible.

Thirdly: I essentially want my home page to look like this: http://www.bikramyogasouthpas.com/ (was a site I found from these forums)

Thanks very much.

Enjoying the framework and recommending to the people I know who are interested, affiliate free.

Share this post


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

Hi Lukee

Could you please try the following Css and see if this resolves your spacing issue.


#brandnav .content-pad {

    padding-bottom: 0em;

}


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
lukee    0
lukee

Thanks, that helped! But I still want it to be closer; like, the menu and logo touching & sitting on top of the slider.

Share this post


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

Hi,

First things first, please do not create a bug tracking issue along with multiple topics, this slows our response time and causes confusion. I have already replied to your other topic regarding this issue yesterday.

http://www.pagelines.com/forum/topic/22859-too-much-space-between-brandingbrandnavclassic-nav-and-quickslide/

I have now closed this topic.

Regarding your issue, you have some custom CSS that is preventing your navigation from sitting onto of your Feature Slider. That is below, I recommend you remove it.

.content .content-pad { padding-top: 2px; }[/CODE]

If you wish to have your logo sitting on top of your Feature Slider, you will need to edit your image, so that it has no white space at the bottom of the image. Then it should either be closer to your slider or actually sitting on top of it.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
lukee    0
lukee

Apologies. This interface doesn't notify me when others reply. And the bug tracking posts were an accidental placement

Share this post


Link to post
Share on other sites
Rob    547
Rob

Lukee, try this:


.section-quickslider .content-pad {

    padding-bottom: 0;

    padding-top: 5px;

}


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
lukee    0
lukee

Didn't work.

By the way, there is no buffer space within my actual logo file upload.

My problem is not resolved.

Share this post


Link to post
Share on other sites
WebIT    3
WebIT

Try this, it worked for me.

/* padding brandnav */

#branding .content-pad {

    padding-top: 10px;

}  

Share this post


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

Remove all the code previously given to you and add the following and see if this works, if it doesn't give you the look you were wishing for, reply and here and we can take a closer look.


#site .section-quickslider .content-pad {
padding: 0;
}

.section-quickslider .fslider {
background: transparent;
padding: 0;
box-shadow: none;
}[/CODE]


Please search our forums, before posting!

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

    • photomom86
      By photomom86+
      I just purchased the DMS framework and the Sophistique child theme. I am needing help with setting the content or body font size... the content in a blog post only.
       
      I have the global font size set to 18px and then I have this custom code in the custom css area
       
      body{ font-size:22px !important;}
       
      but this code also changes the font size of the Sophistique contact bar... which I do not want. Anyone know the code to only change the font size in the blog post content area only?
       
      Or vice versa, I could set the global font to 22px and then use custom code for the contact bar font in custom css.
       
      I've tried to use the chrome developer tools to figure this out to no avail. Thanks!
       
      url is stagegecg.com
       
    • thesongchanneler
      By thesongchanneler
      Aloha,
       
      Another simple question, I'm sure. Just too much space under my nav bar on home page (right at top, below my banner)....    it's the space under the nav bar, and above my "template" which isn't really a template anymore, but 3 columns. How to remove the space? Please view at devorakalma.com
       
      Thank You,
      Devora
    • thwarted
      By thwarted
      Folks,   We're adding the finishing touches to an iBlogPro v1.2 site and have come up against a small issue with the Translate Content on Scroll style for Canvas Areas:   [Canvas Area] > Area Styling > Scrolling effects and sizing > Translate Content on Scroll   It creates a pleasingly modern appearance BUT when the browser is windowed and set wider than it is tall, the parallax effect causes the Canvas contents to fade and become obscured by the next object down the page moving up when you start scrolling. Even when the browser window is made taller, the object below begins its transition up the page far too early, leaving the bottom part of the Canvas always obscured and never visible.   I was wondering if this effect had any UI properties or other configuration? I don't mind editing the code that makes it work, but would rather have some pointers from you guys first.   (Incidentally I have no way of knowing precisely what version of DMS I'm using. Is there an 'about' page detailing everything I have installed? I've seen plenty of references to DMS 2 but the only version I can find by looking at the theme entry is iBlogPro v1.2.)
    • bloom1creative
      By bloom1creative+
      Hey chaps
       
      I think I've mentioned this before but not made a dedicated topic.
       
      I often save sections out to remember them, which works often and well.
       
      I do find however about 20% of the time I fear for my life when I add a saved section to a page, and upon refresh the section appears blank, and all the linked ones are also then blank and I will need to remake the whole thing.
       
      There seems to be no pattern to this and I have multiple sites hosted across the board, ranging from MAMP, Heart VPS to Fasthosts shared hosting.  This error occurs on all these platforms, which at a guess I would say the database table that stores the data suddenly some how loses it.
       
      I would provide a screen shot/video but I have literally described the error and feel this wouldn't make anything any clearer.
       
      So, to summarise.
       
      1. I create a section, add the elements I want.
      2. Save it as 'section2' lets say.
      3. Add it to 5 more pages, all looks fine.
      4. Create a few page templates.
      5. Could be related - I then often unlink these templates that contain saved sections.
      6. Add a saved section to another page, and refresh.
      7. Viola, 'section2' is blank along with all the instances of 'section2' on my site, and needs to be recreated.
       
      Like I say, about a 20% occurrence, not a one off though.  
       
      Also worth noting when I was using Voyant child theme, after I updated it all my saved sections were wiped also.
       
      Any guidance or workarounds / fixes for this would be very helpful as I'm tending to avoid using these where possible now to avoid losing all my hard work.
       
      Thanks
    • swiftitnz
      By swiftitnz
      Hello to all DMS users and support people!
       
      I'm having this issue trying to remove the blank space at the bottom part of each section (PLEASE SEE THE IMAGE).
       
      Image/Screeshot link: http://pho.to/7EDMB
       
      I have tried selecting the padding to be '0', but no luck.
       
      Any suggestions? Help is much appreciated.
       
      Just in case you want to see the live site (currently being finished): http://mostrespectedagents.net/
       
      Regards,
       
      Imran
       
      P.S.: I am using DMS Pro version 2.1.6.1
×