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.
 
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, 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


 
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.
 
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
 
Mitty

Posted: 1/11/2015
Quote message 

ADD:
Can I make different template for mobile version?
 
Mitty

Posted: 1/11/2015
Quote message 

ok I find mobile switcher plugin

But still interest in code for resolve main problem with main teplate =)

sorry for spaming, cant edit posts
 
Mitty

Posted: 1/12/2015
Quote message 

I solve this with second template, its best I guess =). still thanks
 
Mitty

Posted: 2/5/2015
Quote message 

@jrgweb
Hi, I am almost done with one web with which you helped me, but I give menu under the header, no IN to the header and now I dont know, how can I make it fixed under header.

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

I used this, but need code for menu:

/* Begin Additional CSS Styles */
.art-layout-wrapper {
margin-top: 150px;
z-index:0!important;
}
.art-header {
position:fixed;
width:100%;
z-index: 999!important;
}
/* End Additional CSS Styles */

Thank you
 
Mitty

Posted: 2/5/2015
Quote message 

This is how it should look like

 
  Page 1 of 2 Next Last