Jump to content
Sign in to follow this  
designpoint

Features modifications

Recommended Posts

designpoint

Hi,

 

Need assistance on moving the feature banner closer to my nav bar buttons and increase the width to match that of the file attached. 

Home page design.pdf

Share this post


Link to post
Share on other sites
Danny

Hi,

 

In order reduce the space of any section, you will need to use custom CSS. If you provide a link to the site in question, we will be able to assist you.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
designpoint

Hi,

 

Thanks. I have now decided I want the footer background to have a shorter width to be in line with the features banner.

 

Would also like the features banner to be close to my navbar and logo as shown in the file attached.

 

website is test.propertywealthadvisors.com.au

 

Thanks,

 

Adrian

Share this post


Link to post
Share on other sites
Danny

The first thing I notice is that you have the Content section active on the template which is above your Features section, which is causing a gap between the Navigation and Features. So if you wish to reduce the gap, I recommend you removing that.

 

Another issue is that you already have custom code for your BrandNav for the .content-pad class and to repositioning your navigation menu. We are unable to provide support for user created custom code and we are unable to provide you the custom CSS needed to achieve your layout.

 

What I would recommend is the following:

 

 

I recommend using Firebug or your browsers built-in web dev tools and inspect the both your BrandNav and Feature sections to find the correct code. For assistance visit our custom CSS documentation - http://support.pagelines.me/docs/customization/custom-css/

 

You're also using negative margins, which really shouldn't be used to position elements, if it can be helped. I recommend you remove the code you have and try to position your elements with either the position or float properties, as negative margins can cause unlikely layout issues. Also, all sections have padding via the .content-pad container, I would recommend remove the padding on both your BrandNav and Feature sections, this will reduce the space bring the two sections closer to one another.

What you could also try is to have the Features section in your Header Template Area, this may make the positioning much easier.
 

You will also need to possibly move your logo image higher up so there is room for your navigation can be position correctly. As for the hover effect, this may be rather tricky due to the fact that the hover state effect is connected to the feature slider and not the navigation itself.

What you're trying to do isn't simple and is going to take you quite some time to get right, especially on all browsers. The best course of action is to use my suggestions above and apply them to your design and just keep tweaking the CSS for both the BrandNav and Features slider.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
designpoint

Thanks. I have removed the negative number and now trying to fix the alignment of the navbar with my logo.

 

What area of CSS should I be looking at to complete this?

 

Also, how I position the logo higher?

Share this post


Link to post
Share on other sites
Danny

To be honest, I would ignore that suggestion.

I would focus on getting everything into position first then work on the hover/active page triangular image.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
designpoint

I am trying to position the nav bar in line with my logo but cannot seem to get the right css code, any suggestions?

Share this post


Link to post
Share on other sites
Danny

Unfortunately, we are unable to provide you the custom CSS needed to achieve your layout. But you will probably want to target the BrandNavs <ul> class and use the position property.

 

http://www.w3schools.com/cssref/pr_class_position.asp

 

If you're struggling with the custom code, I recommend contact one of our Pros. - http://www.pagelines.com/pros/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Danny

OK, I have provided you with some starter code, something which I am not supposed to do.

 

 

#site .section-brandnav .main-nav {
position: relative;
top: 80px;
}

I recommend you visit our custom CSS documentation, which will assist you.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
designpoint

Thanks. I have searched the forums and looks like staff have been assisting with css code thats why I thought I could ask CSS questions through here

Share this post


Link to post
Share on other sites
Danny

We only assist you CSS code if its related to a bug or minor conflict, the CSS provided is basically a band aid until a fix has been implemented. All other custom CSS provided will be from topics from before we changed our policy.

 

As users were taking advantage of our staff and basically getting them to design their sites for them.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
designpoint

Ok navbar has been fixed thanks a lot for your help.

 

I have added the Content back in. Looks like the features banner has a gap to the nav bar? Anyway of making this close to the navbar section? If I remove the content plugin it won't allow content info on the other pages

Share this post


Link to post
Share on other sites
Danny

You can hide sections on a per page/post basis. Go to Wordpress Admin Dashboard > Pages > select the page you're currently working and then scroll down until you see the PageLines Meta Settings. Then check the hide Content section and save the page.

 

This will remove the content section this page and this page alone.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
designpoint

I have the following:

 

 

#features .content-pad {
  top: 10px;}

 

 

but the features banner won't move?

Share this post


Link to post
Share on other sites
Rob

Hi,

 

There appears to be some custom code found below:

.section-brandnav .content-pad {
    padding-bottom: 2em;
    padding-top: 2em;
}

The padding-bottom is causing a substantial whitespace below the menu/branding area, pushing the feature slider down.  If you replace padding-bottom: 2em; with padding-bottom: 0; you'll see how fast it moves the slider up considerably. 


Former PageLines Moderator, Food Expert and Raconteur

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

Sign in to follow this  

×