Hello All,
So, I've been messing with the "comet" layout and have posted what I have here... http://mynetshepherd.coffeecup.com/
Anyway...here is my issue:
When I apply "position: fixed" to the header (which is line#319 in the CSS) when you minimize the screen the logo (or banner image) disappears. If you do not fix the header this does not happen.
Can someone point me in the right direction so the banner image stays in place?
BTW...I also had to apply a margin of 90px to the bg of the banner image after putting the fixed position as it caused a alignment problem there, too.
I am not a coder and dont really know what I'm doing, but I must say messing around with this thing has been fun and informative.
Thanks,
MJ
mark johnson
Registered User
388 posts
Adam East
Registered User
3,293 posts
Hey Mark,
The banner does not disappear, it is pushed under the Nav which is set to fixed. There are two ways to correct this issue.
First and best way, is that when on a breakpoint where your nav is changed to 100% width you should remove the position:fixed from the nav as that is a large amount of screen space taken up.
The second option would be to give the banner area margin equal to the height of the nav at the breakpoint.
I would recommend the first option as it is the most user friendly.
The banner does not disappear, it is pushed under the Nav which is set to fixed. There are two ways to correct this issue.
First and best way, is that when on a breakpoint where your nav is changed to 100% width you should remove the position:fixed from the nav as that is a large amount of screen space taken up.
The second option would be to give the banner area margin equal to the height of the nav at the breakpoint.
I would recommend the first option as it is the most user friendly.
mark johnson
Registered User
388 posts
Thanks, Adam!
I follow your logic about removing the position:fixed, but I have no clue where to do that (or how) without removing the whole deal.
is this done in rlmp or html editor? (i changed to position:fixed in html editor as that is the only way I know...and know is a relative term:) )
Thanks!
I follow your logic about removing the position:fixed, but I have no clue where to do that (or how) without removing the whole deal.
is this done in rlmp or html editor? (i changed to position:fixed in html editor as that is the only way I know...and know is a relative term:) )
Thanks!
Adam East
Registered User
3,293 posts
mark johnson wrote:
Thanks, Adam!
I follow your logic about removing the position:fixed, but I have no clue where to do that (or how) without removing the whole deal.
is this done in rlmp or html editor? (i changed to position:fixed in html editor as that is the only way I know...and know is a relative term:) )
Thanks!
Thanks, Adam!
I follow your logic about removing the position:fixed, but I have no clue where to do that (or how) without removing the whole deal.
is this done in rlmp or html editor? (i changed to position:fixed in html editor as that is the only way I know...and know is a relative term:) )
Thanks!
You would need to make the change under the media query. Find the breakpoint width in which your menu breaks. Do it break at 300px, 500px, 505px? Then in your CSS write a media query for that breakpoint and set the position to relative for the nav.
mark johnson
Registered User
388 posts
Thanks for the follow up, Adam.
I have confirmed the break point is at 410px in rlmp...so here is what I have, but it seems it still acts the same. I have tried many, many variations of a media query (from google searches) and have not had any success. Oh well...
body > .row.full-width-header {
max-width:none;
background-color: #2a2c2b;
position:fixed; ***past here is the what I added***...
@media (min-width: 410px){
position:relative; }
}
------------------------
Am I even close???
I did have an extra } before @media which changed it a bit (in that it collapsed partially, but not all the way) , but it also changed the color, so I figured I'd get rid of it.
I have confirmed the break point is at 410px in rlmp...so here is what I have, but it seems it still acts the same. I have tried many, many variations of a media query (from google searches) and have not had any success. Oh well...
body > .row.full-width-header {
max-width:none;
background-color: #2a2c2b;
position:fixed; ***past here is the what I added***...
@media (min-width: 410px){
position:relative; }
}
------------------------
Am I even close???
I did have an extra } before @media which changed it a bit (in that it collapsed partially, but not all the way) , but it also changed the color, so I figured I'd get rid of it.
Adam East
Registered User
3,293 posts
mark johnson wrote:
Thanks for the follow up, Adam.
I have confirmed the break point is at 410px in rlmp...so here is what I have, but it seems it still acts the same. I have tried many, many variations of a media query (from google searches) and have not had any success. Oh well...
body > .row.full-width-header {
max-width:none;
background-color: #2a2c2b;
position:fixed; ***past here is the what I added***...
@media (min-width: 410px){
position:relative; }
}
------------------------
Am I even close???
I did have an extra } before @media which changed it a bit (in that it collapsed partially, but not all the way) , but it also changed the color, so I figured I'd get rid of it.
Thanks for the follow up, Adam.
I have confirmed the break point is at 410px in rlmp...so here is what I have, but it seems it still acts the same. I have tried many, many variations of a media query (from google searches) and have not had any success. Oh well...
body > .row.full-width-header {
max-width:none;
background-color: #2a2c2b;
position:fixed; ***past here is the what I added***...
@media (min-width: 410px){
position:relative; }
}
------------------------
Am I even close???
I did have an extra } before @media which changed it a bit (in that it collapsed partially, but not all the way) , but it also changed the color, so I figured I'd get rid of it.
Can you upload this change for me to take a look? I have searched your CSS and can not find this code.
mark johnson
Registered User
388 posts
sorry!
I uploaded it just now.
I uploaded it just now.
Adam East
Registered User
3,293 posts
max-width:none;
background-color: #2a2c2b;
position:fixed;
@media (min-width: 410px){
position:relative;
}
Is what you currently have in your CSS.
First, you should be placing the CSS in a separate CSS file, not in the Main.CSS file.
However, if you wanted to do it in the Main.CSS file you would scroll all the way to the bottom, find the last breakpoint (410) and add this
body > .row.full-width-header {
position: relative;
}
position: relative;
}
mark johnson
Registered User
388 posts
ok...thanks! I'll have to learn how to add a new CSS...but for now I did put it in the main and it appears to be working!
Thanks for all your help!! You are awesome!!
MJ
Thanks for all your help!! You are awesome!!
MJ
Adam East
Registered User
3,293 posts
mark johnson wrote:
ok...thanks! I'll have to learn how to add a new CSS...but for now I did put it in the main and it appears to be working!
Thanks for all your help!! You are awesome!!
MJ
ok...thanks! I'll have to learn how to add a new CSS...but for now I did put it in the main and it appears to be working!
Thanks for all your help!! You are awesome!!
MJ
It is easy!
To create a custom.css file that is placed into the <head> section of all the pages on your website just goto Layouts > Manage Project . Here you add the custom.css markup into the <head> section of all your pages making it easy for you to export and begin working on your project right away!
Here is the code you will need:
<link rel="stylesheet" href="css/custom.css" type="text/css">
I also created an article here http://www.coffeecup.com/help/articles/ … out-maker/ that can help you learn how to edit a project outside of RLM.
Hope this helps.
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
