Jump to content
nfp1900

Branding area with background image, nav bar and social icons

Recommended Posts

nfp1900    29
nfp1900

I used a two column layout to get a logo and the social icons into the header but I also need a background image to sit to the right of the header content. I can't use another media box because I need the social icons to sit in this area. 

 

Using the background image option in the header didn't seem to work  - it was scaled up which was ok but I couldn't get it in the right position. 

 

Next option:  I created a class and used CSS to get the image loaded but the positioning just doesn't work - ( I also tried with %). 

 

.header {
background-repeat:no-repeat;
background-position:top right;
}
 
This is the page: 
 
Maybe someone has better way of doing this? This is the header spec I received from the client which is just a guide.... http://nicholaspealldesign1.com.gridhosted.co.uk/header/
 
And a PS. the current setting isn't so bad in chrome but in Firefox it doesn't render correctly at all - the social icons knock the background graphic to the left.

Share this post


Link to post
Share on other sites
dhrose+    3
dhrose

Probably have to put a column within in the right column... which will be pushed below the first one. Put a background image on one and the media box in the other? Maybe...

Share this post


Link to post
Share on other sites
Rob    547
Rob

There are more possible options available to you for positioning the background: http://www.w3schools.com/cssref/pr_background-position.asp

 

Here's what I'd do.  Remove the column sidebars, and apply your background to the header, without the CSS.  Just use the header's background option.

 

Add a three column section.

 

Set the width of the left-most column to 7. The next column should be 2, and the last (right column) should be 3 wide.

 

In the left column, use a media box to add the logo.  In the middle column, add a text area and add your social media.  Then, clone the text area, drag the clone to the 3rd column and add your image for the leaf-shaped green bit. Position that with CSS by wrapping the image tag in a unique class. Use margins, padding and alignment to position that part.  You can also do that with your social media.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
nfp1900    29
nfp1900

Thanks for the input.

 

When uploading an image in the header options area it is scaled to the size of the header - therefore I had to create an image that was the correct pixel width (or slightly larger) to enable it to be placed in the correct location. Using CSS to position doesn't appear to make the slightest bit of difference. I softened the side of the image in photoshop - now the alignment which isn't consistent across all browsers isn't so noticeable.

 

I chucked the social icons into a  text box and used some padding to shunt them further south. 

Share this post


Link to post
Share on other sites
navigador+    6
navigador

Thanks for the input.

 

When uploading an image in the header options area it is scaled to the size of the header - therefore I had to create an image that was the correct pixel width (or slightly larger) to enable it to be placed in the correct location. Using CSS to position doesn't appear to make the slightest bit of difference. I softened the side of the image in photoshop - now the alignment which isn't consistent across all browsers isn't so noticeable.

 

I chucked the social icons into a  text box and used some padding to shunt them further south. 

 

Any css I put in the custom box didn't appear do anything either. What I do is always have another Chrome tab open, BUT in incognito. I alwyas puplish to I can see what it looks like in the incognito tab. Plus most of the time I found I had to use !inportant to overide any other nested css. You might have to play with this, but it's already helped a few DMS'ers in the forum:

 

I removed all padding by using this css in the Custom CSS/LESS Custom Code editor - give it a go - shazam!

 

/*
Header Logo - remove all padding
*/
.pl-area-wrap {padding-top: 0px !important; padding-bottom: 0px !important;}
.mediabox-wrap {min-height: 0px !important;}
.pl-section-pad {margin-bottom: 0px !important;}
.alignleft {margin-bottom: 0em !important;}
.the-media-html p {margin-bottom: 0px !important; margin-top: 0px !important;}

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

    • khat
      By khat+
      I think I may have installed pagelines pro incorrectly, and then used features incorrectly. I installed first platforms framework theme and then the child, thinking I could do setup for child later. I tried to set up a background image, and tried custom css feature in pagelines dashboard. I had mistakes in my css, and just thought that if I deleted the info in the css custom feature in pagelines dashboard that the new information would overwrite the old info. The background image didn't respond at all, probably because I didn't have the child directory renamed. I then tried to use the LSS plugin to create css and added more css, possibly, somewhere -sigh-. I never did change the background image and get it placed properly. I used a workaround and in nested containers I placed a background image which worked well enough, so I moved on to try to create my nav bar/ menu bar. When I go to the Menus panel, there is NO area where I can place a menu on a page. I have read and reread and re- re- reread the instructions for placing a menu. I've used the pagelines editor to place a menu, however only HOME shows up. I've been at this for many hours. I've since uninstalled all of my pagelines items and reinstalled, thinking that it would restore all my changes to default, but no, it is still all there, with all my unresolved issues. I am completely at a loss as to what to do next.
    • 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
    • SaschaM
      By SaschaM+
      Hello,
      sorry. i got a problem on my site i can not fix myself, would be nice somebody can help.
      I use:
      - Platform 5 (latest) Pro
      - Pagelines Framework (latest for Platform 5)
      - keycdn (cdn enabler, cache enabler und optimus WebP)
      - my site:  example
      Problem:
      The background image i use in the Impulse Section is not beeing replaced automatically if i specify a CDN Url. I need to put in the cdn url to the image manually. Why?
      If you look in the button of the the side you see post grid section, where i have no problems. You also see there WebP Images working.
      Now i can not really use the direct cdn url for the impulse background image, cause i want to benefit there from WebP Image also in the background as it works in post grid section.
      How does it works with Impulse? The webP image for the background is ready to use.
      Thank you.
       
       
       
       
       
       
       
       
    • yemoonyah
      By yemoonyah+
      I just installed and added the Flipper section to my home page and it makes my navigation/menu bar items disappear.
      They do show up again when scrolling down and everything seems normal on the other pages.
      http://yemoonyah.com
      Thanks.
       
    • crose
      By crose+
      Hi,
      I am using the Canvas Area section at the top of my site. I have a video playing in the background, which works really well on desktop. But on mobile video doesn't play without user interaction, so I have a static image in place as an alternate image. However when viewed on a mobile device there is now a play button over the static image that does nothing. This didn't use to happen so I imaging it is due to an upgrade. But this is really bad UX. Is there a way to remove it?
      Here is the site:
      http://gator4088.hostgator.com/~asif/
      Thanks in advance.
      Chuck
×