How do I create a fixed header/menu


  Page 1 of 2 Next Last 
Author Message
Derek

Posted: 7/15/2014
Quote message 

Hi Everyone,

First of all, I am not very knowledgeable when it comes to css, so anyone who has advise for me should know that up front.

I am trying to make the header and page menu fixed so they always stay at the top of the page, in this theme I am working on, and I don't really know how to do it. Here is a link to it on my test site...

http://onlinedirectoriesllc.com/thesimargroup_bk/pawnjustjewelry/

Can anyone explain what I need to do to do it?

Thank you very much in advance.

Derek
 
Derek

Posted: 7/15/2014
Quote message 

Sorry, didn't mention, I am looking to do this in a Wordpress theme.

Derek
 
techtom

Posted: 7/15/2014
Quote message 

Hi Derek,

Can you make change to your artisteer theme? Make the header and menu outside of the sheet and keep the menu in the header.

It would make it easier for what you want to do.
 
Derek

Posted: 7/15/2014
Quote message 

Hi Tom,

I think I know what you mean, and I went ahead and did what you suggested. Let me know if you meant something different.

Derek
 
techtom

Posted: 7/15/2014
Quote message 

That is better. I may have made the yellow top part of the header as well but try adding this to your style.css file at the bottom.

#art-main { background-attachment:fixed; }
.art-sheet {margin-top:360px;}

.art-header {
position:fixed;
z-index: 1000 !important;
right:50%;
margin-right:-449px;
width:898px; }

.art-nav {background:#000000;}

we will need to adjust for responsive design
 
Derek

Posted: 7/15/2014
Quote message 

Oh cool, that worked. Except my yellow bar at the top needs to be adjusted. I will try what you suggested and let you know. Thanks!


 
Derek

Posted: 7/15/2014
Quote message 

Oh, when I looked at the site when I wasn't logged into Wordpress, it looks great! Thank you very much, I really appreciate it. I sure do wish I knew more about that kind of stuff. I have been trying to figure this out for a long time. It would be nice if Artisteer could do this itself as more people probably want to do this. Well I guess I know how to now!

Thanks again, Tom!

Derek
 
techtom

Posted: 7/15/2014
Quote message 

Derek,

I did up some css for your responsive design layouts. It can refined.

Ideally your header should be full width and include the yellow border at the top. It would make css a bit simplier.

This should be a good starting place though.

Try adding this to the bottom of your style.responsive.css


/* Responsive Header css */


.responsive .art-header {
position: fixed;
z-index: 1000 !important;
right:0px !important;
top:0px !important;
margin:0px !important;
padding:0px !important;
width: 100% !important;
border:0px !important;
background-color:#000000;
background-image: url('images/header.jpg');
background-position: 0 0;
background-size: contain;
}

.responsive .art-nav .art-menu-btn {}
.responsive nav.art-nav {background:#000000; position:fixed !important; z-index:1010 !important; width:100% !important; margin:0px; padding:0px;}

@media (min-width: 798px) and (max-width: 898px) {
.responsive .art-header { height: 312px;}
.responsive nav.art-nav {top:312px !important;}
.responsive .art-sheet {margin-top:340px !important;}
}

@media (min-width: 698px) and (max-width: 797px) {
.responsive .art-header { height: 292px;}
.responsive nav.art-nav {top:292px !important;}
.responsive .art-sheet {margin-top:320px !important;}
}

@media (min-width: 640px) and (max-width: 697px) {
.responsive .art-header { height: 272px;}
.responsive nav.art-nav {top:272px !important;}
.responsive .art-sheet {margin-top:300px !important;}
}

@media (min-width: 598px) and (max-width: 639px) {
.responsive .art-header { height: 258px;}
.responsive nav.art-nav {top:258px !important;}
.responsive .art-sheet {margin-top:286px !important;}
}

@media (min-width: 550px) and (max-width: 597px) {
.responsive .art-header { height: 232px;}
.responsive nav.art-nav {top:232px !important;}
.responsive .art-sheet {margin-top:260px !important;}
}
@media (min-width: 497px) and (max-width: 549px) {
.responsive .art-header { height: 202px;}
.responsive nav.art-nav {top:202px !important;}
.responsive .art-sheet {margin-top:230px !important;}
}

@media (max-width: 496px) {
.responsive .art-header { height: 160px;}
.responsive nav.art-nav {top:160px !important;}
.responsive .art-sheet {margin-top:170px !important;}
}


 
techtom

Posted: 7/15/2014
Quote message 

made a slight change to the responsive menu and bar so it stands out a bit more.


/* Responsive Header css */

.responsive .art-header {
position: fixed;
z-index: 1000 !important;
right:0px !important;
top:0px !important;
margin:0px !important;
padding:0px !important;
width: 100% !important;
border:0px !important;
background-color:#000000;
background-image: url('images/header.jpg');
background-position: 0 0;
background-size: contain;
}

.responsive .art-nav .art-menu-btn {width:20%;}
.responsive nav.art-nav {background:#000000; position:fixed !important; z-index:1010 !important; width:100% !important; margin:0px; padding:0px;background:#444444; border-bottom:1px solid #ffffff;}
.responsive ul.art-hmenu>li>a {background: #555555;}
@media (min-width: 798px) and (max-width: 898px) {
.responsive .art-header { height: 312px;}
.responsive nav.art-nav {top:312px !important;}
.responsive .art-sheet {margin-top:340px !important;}
}

@media (min-width: 698px) and (max-width: 797px) {
.responsive .art-header { height: 292px;}
.responsive nav.art-nav {top:292px !important;}
.responsive .art-sheet {margin-top:320px !important;}
}

@media (min-width: 640px) and (max-width: 697px) {
.responsive .art-header { height: 272px;}
.responsive nav.art-nav {top:272px !important;}
.responsive .art-sheet {margin-top:300px !important;}
}

@media (min-width: 598px) and (max-width: 639px) {
.responsive .art-header { height: 258px;}
.responsive nav.art-nav {top:258px !important;}
.responsive .art-sheet {margin-top:286px !important;}
}

@media (min-width: 550px) and (max-width: 597px) {
.responsive .art-header { height: 232px;}
.responsive nav.art-nav {top:232px !important;}
.responsive .art-sheet {margin-top:260px !important;}
}
@media (min-width: 497px) and (max-width: 549px) {
.responsive .art-header { height: 202px;}
.responsive nav.art-nav {top:202px !important;}
.responsive .art-sheet {margin-top:230px !important;}
}

@media (max-width: 496px) {
.responsive .art-header { height: 160px;}
.responsive nav.art-nav {top:160px !important;}
.responsive .art-sheet {margin-top:180px !important;}
}


 
Derek

Posted: 9/30/2014
Quote message 

Hi again,

Sorry, my client just decided he wanted to change his header. It is much wider now, and a little narrower. I was able to figure out how to make some of the changes to make the header fixed, but now the background stripe at the top and the menu is all screwed up and I don't know what I need to do to the code to fix it. Can you help?

http://onlinedirectoriesllc.com/thesimargroup_bk/pawnjustjewelry/

Thanks!

Derek
 
gcm

Posted: 10/1/2014
Quote message 

If it's the yellow stripe that moves as you scroll then in your style.css find art-main, pageglare.png (around line 13) Change scroll to fixed.
 
Derek

Posted: 10/1/2014
Quote message 

Oh, that worked, thank you very much!
 
Mitty

Posted: 11/24/2014
Quote message 

Hi,
I am trying do this on my page, but I have problem with this, I tried this codes and custom them by myself, but its not work good, can you give me solution? Thank you...
On this page http://www.radostzfotek.cz/
I already solve scrolling to sections, but I need fixed menu.
Thank you very much



Quote techtom:

That is better. I may have made the yellow top part of the header as well but try adding this to your style.css file at the bottom.

#art-main { background-attachment:fixed; }
.art-sheet {margin-top:360px;}

.art-header {
position:fixed;
z-index: 1000 !important;
right:50%;
margin-right:-449px;
width:898px; }

.art-nav {background:#000000;}

we will need to adjust for responsive design


 
jrgweb

Posted: 11/24/2014
Quote message 

@Mitty
Try something like this:

.art-header {
position: fixed;
z-index: 999 !important;
width: 100%;
background-color: #FFFFFF;
}
.art-layout-wrapper {
margin-top: 120px !important;
}

Make adjustments to the css as needed.
Insert in file/export/options/css options


 
Think

Posted: 11/24/2014
Quote message 

Think you may have to specify the width of the header if you are using position:fixed. So like Tom suggested.. eg.

.art-header{
position:fixed;
width:100%;
background:white;
height:110px;
z-index:999;
}

.art-layout-wrapper{
margin-top:140px;
}

Adding that to the end of your style.css sheet might work..
 
Mitty

Posted: 11/24/2014
Quote message 

Thank you so much, its working, but dont know what you mean with
Insert in file/export/options/css options
because I dont know where I can find this path
 
gcm

Posted: 11/24/2014
Quote message 

It's not a path, it's instructions to add the css in Artisteer. Go to file, select export, then select css options. There is where you add the css instructions
 
Mitty

Posted: 12/11/2014
Quote message 

Hi guys, I know I was asking you before, but please, I need new code as before for this page: http://www.rmbcapital.cz/
There is logo as image. Thx
 
jrgweb

Posted: 12/11/2014
Quote message 

@Mitty

Add this to the bottom of the styles.css file. I added background on the header because you have some sorta transparency going on in the header. Anyway, adjust as you wish.

.art-layout-wrapper {
margin-top: 160px;
z-index:0!important;
}
.art-header {
position:fixed;
width:100%;
z-index: 999!important;
background: #FFFFFF;
}
 
Mitty

Posted: 12/18/2014
Quote message 

Hi, so I create new web without classical header & menu, how can I do same thing as before on this site?

Thank you very much!!

http://www.abp-management.cz/
 
jrgweb

Posted: 12/18/2014
Quote message 

@Mitty

First of all, does the content on this page change?
If not, then you can use this code at the bottom of the css.

.layout-item-4 {padding-top: 190px;}
.layout-item-0 {position:fixed;z-index:400;}

If it changes then you need to add additional classes or id's.
 
Mitty

Posted: 12/18/2014
Quote message 

Nope, it will be static, sometimes I will add some new text by html, not by article.
Now its ok, but automatic scrolling isnt working, because it scroll text on start of page, which is under header.
 
jrgweb

Posted: 12/18/2014
Quote message 

@Mitty

Have you adjusted the script?
Look for this and increase the off set

scrollTop: target.offset().top - 30

You may have to increase to 215 or something in that area.
 
Mitty

Posted: 12/19/2014
Quote message 

where I can find it please?
in style.css I havent nothing like this
 
Mitty

Posted: 12/19/2014
Quote message 

oh I find it =) so everything is ok now =) thank you
 
Mitty

Posted: 12/19/2014
Quote message 

:( so offset makes big spaces between DIV not some standart offset from top... look pls: http://www.abp-management.cz/
 
jrgweb

Posted: 12/19/2014
Quote message 

@Mitty

Just make a few tweaks.

.layout-item-4 {padding-top: 190px;margin-bottom:-150px!important;}
.layout-item-0 {position:fixed;z-index:400;}
.layout-item-10 {margin-top:150px!important;}
 
Mitty

Posted: 12/23/2014
Quote message 

@jrgweb

Thank you!
 
jrgweb

Posted: 12/30/2014
Quote message 

@Josh
Your obviously not a professional web designer or developer.
That said, there are many great designers/developers right here in this forum.
I did a quick check on the quality of the site you reference. It's not bad but could be better.
In the future when you need additional web services, do check with some of the talented designers on the artisteer forums.

If you ever change your mind and wish to learn just a little about web design, this might be a good place to start.
 
Mitty

Posted: 1/11/2015
Quote message 

@jrgweb
Hi, thanks for helps again.
I need one more favour. How can I fix these websites for mobile? These are ok, when I wont fix menu, but with fix menu it has problem with compatibility.

http://www.rmbcapital.cz/ and abp-management.cz

Thank you
 
  Page 1 of 2 Next Last