Too Much Space Between Brandnav And Content

[lukee 0]

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.

[James B 436]

Hi Lukee

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

#brandnav .content-pad {

    padding-bottom: 0em;

}

[lukee 0]

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

[Danny+ 1,327]

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.

[lukee 0]

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

[Rob 547]

Lukee, try this:

.section-quickslider .content-pad {

    padding-bottom: 0;

    padding-top: 5px;

}

[lukee 0]

Didn't work.

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

My problem is not resolved.

[WebIT 3]

Try this, it worked for me.

/* padding brandnav */

#branding .content-pad {

    padding-top: 10px;

}  

[Danny+ 1,327]

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]