Jump to content
integritymediacorp

Header & Footer - Responsive BG image

Recommended Posts

integritymediacorp    0
integritymediacorp

Hi,

 

I make a background image in header and footer, how to make responsive it?

I try use the "max-width" and "min-width", but it's not work correct and try to change "px" to "%" nothing works..

 

Thank you!

Share this post


Link to post
Share on other sites
integritymediacorp    0
integritymediacorp

btw, here is my goal, I need to do that background image under top-menu...

 

Screen-shot-2013-04-04-at-1.24.16-PM1.pn

Share this post


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

Hi there, if you apply your image as a background using css to the section and the site is set to a responsive layout you shouldn't have to set the width manually, just enter the image into the container, like

 

#header {background:url(yoururl.jpg);} 

We're unable to access your site as you have a coming soon plugin active.


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

Hi there, if you apply your image as a background using css to the section and the site is set to a responsive layout you shouldn't have to set the width manually, just enter the image into the container, like

 

#header {background:url(yoururl.jpg);} 

We're unable to access your site as you have a coming soon plugin active.

Hi, I don't have a coming soon plugin.. I try this CSS code, it's work but he is still not responsive..

Share this post


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

Hi there, i can only see this when i click on the link - http://screencast.com/t/OU4DBcN1nBF9


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
mackenzie    12
mackenzie

I see you background image and when I view it in Chrome adjusting the browser to different sizes it does appear your site is being responsive to the changes. However there are some things I am noticing. The black ThinkSpace graphic is overlaying the blue background and at some points hiding the words/background behind it. Do you want this to happen? Your menu option are responsive however they are all over the place when I shrink the screen. So I think it's just narrowing down what you would like to be the final look.


Mackenzie - PageLines Help Desk

The Centsible Family - Writer, Photographer and Coffee Addict

---------------------------------------------------

Kindly search this 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.

Share this post


Link to post
Share on other sites
integritymediacorp    0
integritymediacorp

I see you background image and when I view it in Chrome adjusting the browser to different sizes it does appear your site is being responsive to the changes. However there are some things I am noticing. The black ThinkSpace graphic is overlaying the blue background and at some points hiding the words/background behind it. Do you want this to happen? Your menu option are responsive however they are all over the place when I shrink the screen. So I think it's just narrowing down what you would like to be the final look.

My black ThinkSpace graphic (Logo) here because I try to solve this problem and I think I will try to use the <div> for each side and make width in % for the middle graphics, maybe I can fix this problem. Here is no function to add background to menu or header?

Share this post


Link to post
Share on other sites
integritymediacorp    0
integritymediacorp

any ideas? Nothing works... How can I make responsive the top menu? I don't know how, but it's work with the image, but when I in Chrome adjusting the browser to different sizes my top menu go down all the time :(

 

take a look this page

http://migrationspace.com/our-process/

Share this post


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

Hi there, I've looked through your site and it seems you have the bg image inserted twice. Once as a bg to the header, and again as a bg to the nav.

 

http://screencast.com/t/w86oNetyRUQx

 

If you remove the header image and then apply the 'background-size:100%;' commands to the css in the navbar menu the image fits the screen width.

 

http://screencast.com/t/xqDaqTkx


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

Hi there, I've looked through your site and it seems you have the bg image inserted twice. Once as a bg to the header, and again as a bg to the nav.

 

http://screencast.com/t/w86oNetyRUQx

 

If you remove the header image and then apply the 'background-size:100%;' commands to the css in the navbar menu the image fits the screen width.

 

http://screencast.com/t/xqDaqTkx

ok, its more close to what I need, but when I change the browser size to maximum and this background  image going to be huge, I try to make 'background-size:100% auto;' or 'background-size:100% 100%;' or max-height: 127px; nothing work. do you know how to fix it?

Screen-shot-2013-04-08-at-9.32.31-AM.png

 

 

 

and how to connect menu with this background? because it looks separate

Screen-shot-2013-04-08-at-9.36.24-AM.png

Share this post


Link to post
Share on other sites
Rob    547
Rob

Hi,

 

Let me explain a bit about 'responsiveness'.  You are placing the background in the header and it is fully responsive.  The menu is also responsive, but it will not fall within the context of the header. By nature, the menu will appear below the header background, which will not stretch to match the height of your menu.  To affect the desired style, you need a different way of creating the graphic background.

 

You'd need to come up with a different way to apply this design.  To do it properly, you'll need a Pro designer/developer.  The reason for this is that in normal circumstances, when a menu is viewed in mobile view, it is not viewed straight across. Rather, the menu items 'wrap' and increase in size to ensure they're seen. 

 

In your design, the background isn't behind the menu but in the header.  The header doesn't rescale vertically or do anything but narrow down to match the width of the screen upon which it is viewed.  Since your image is staying within that scope and resizes according to the screen width, it is fully responsive.

 

You may want to try going to Dashboard > PageLines > Site Options > Layout Editor and check the box for Disable Mobile View.  Your site will still be visible on mobile devices, but the menu will be very small and will not wrap.  It will look exactly the same as in any other browser, just much smaller.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
integritymediacorp    0
integritymediacorp

Ok thank you!

but I still have a issue, but now I made it more match with mockups.

Screen-shot-2013-04-11-at-12.40.03-PM.pnScreen-shot-2013-04-11-at-12.40.31-PM.pn

Screen-shot-2013-04-11-at-12.40.45-PM.pn

 

 

 

 

and here is when you open menu... looks really weird, because I'm use default NavBar

Screen-shot-2013-04-11-at-12.47.23-PM.pn

Share this post


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

Hi there, the mobile version of the navbar menu will display differently to the desktop, you'll need to use browser specific css to apply a background behind the submenus so the user will be able to see the text clearly.


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

Hi there, the mobile version of the navbar menu will display differently to the desktop, you'll need to use browser specific css to apply a background behind the submenus so the user will be able to see the text clearly.

You know which one submenus css I have to use? Because I tried everything and nothing change or do my top menu responsive, but it's supposed to be, because Im use default menu.. 

Share this post


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

Well when in mobile view the background color which goes behind the background link is controlled by

.navbar.pl-color-blue {

    background-color: #5E8DC8;
    background-image: -moz-linear-gradient(center top , #6E9ED2, #4574B8);
    background-repeat: repeat-x;
    border-top: 1px solid #4574B8;
}

 

But you will have removed that and added your own image background.

 

So you'll need to apply your background color in a different way, possibly to the li tab for the dropdown, but you'll need to download the browser specific css plugin and apply the relevant browser code infront of the css so it doesn't effect the desktop version, as you want it just to effect the mobile layout. Something like the below will add a color behind the menu links on your mobile site.

body.mobile .navbar .navline > li > a {
    background: #000000;
}

Your menu is responsive, it's going from the main menu to the mobile menu when the screen size changes.

  • Like 1

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

    • lionel1
      By lionel1
      Hi,
      I use on my home page " impulse module " but when i look on my iPhone the image is cut and not responsive .
      i only have this problem with this module not with the other one .
      thanks for ur help
      website / www.elonakane.com 
      Lionel 
       
    • kwaoru
      By kwaoru
      Hi,
       
      I have been using DMS and pagelines.
      I am facing to a huge trouble with the appearance of one of my page on mobile (smart phones) built with pagelines.
      However I haven’t come to any solutions to organise either edit the appearance of mobile view to look neat or deactivate the responsive function. 
      Now it looks totally messy on the phone...
       
      1. Is there any way to edit the appearance of the mobile version (responsive theme)?
      2. Is there any way to deactivate responsive function?
       
      If I could receive support from you to go thorough this process I would be happy to be a pro member. 
       
      Looking forward to hearing from you.
    • Paul
      By Paul+
      I have woocommerce store, product shows title and price fine until reduce screen with on a tablet/mobile phone the price and title gets removed?  Any ideas? 
      Here's an example page: https://thelaptopfixers.com/product/operating-system-re-install/
      Try it on both desktop PC browser then resize to mobile/cell phone size!  
      Thanks
    • kwaoru
      By kwaoru
      Hi,
      I desperately need to deactivate the responsive function on mobile for reasons. It looks so messy with the responsive look on mobile and not navigating or informative at all as it is. 
      I searched for solutions online and tries some of those that I found but nothing worked out. Also I found a previous post on this forum says that this theme pagelines DMS is not meant to be build to deactivate the responsive function... 
      Also tried with widget such as WPtouch to edit the mobile look a little more informative but as I am using "single page" theme on pagelines, the frontpage(main page) never appears on those app.
      Seems like not compatible?
      If there is no way to deactivate responsive function or I'll have to recreate another page just dedicated for a mobile page? or change the theme completely and build a page from scratch?
      I have been searching for this for two days already...
      Could anyone wise and kind out there, please help me?
       
      Thanks,
    • flourishdesignstudio
      By flourishdesignstudio
      Hello,
      I have an older site that was built using PageLines several years ago (prior to the release of DMS). I wanted to leverage some of the power of your new PL5 plugin but the theme prevents be from adding any generated custom sidebars to the theme (through the drag and drop interface) and does not allow me to add any PL5 sections/containers/etc to the header or footer. Is there any way to easily override that or am I stuck only using PL5 in the content areas of the site?
      Thanks so much for the help!
×