How to make the horizontal menu fixed in the Artisteer template?
 Open the folder with the finished project of our template (site).

Let's find and open the file (style.css).
It's better to open it in Dreamweaver.

Mobirise

    
Next, find the block (.art-nav).

Its position is between 300-500 lines, but depending on the template design, it can be closer and farther.
Below is an example of a CSS block in Dreamweaver. This code is not a fixed menu.

    We need only add a few lines in the yellow sector and change the position: relative; on position: fixed;

position: fixed;
z-index: 499;
width: 100%;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto; 

For those who do not want to do this with pens I suggest a safer and more logical way.

After you find the .art-nav module, click the left mouse button on .art-nav. On the right side of the column of styles at the very bottom of it you will see the .art-nav style. Double clicking on this line will give you the following window.

See the next picture.

Now, click on the Positioning category. The following window will appear:
Replace in Type: relative; on fixed. And say Apply. More here we do not touch anything.

    In the end, we get the following code example.

.art-nav
{
background: #E0EFF7;
background: -webkit-linear-gradient(top, #EBF4FA 0, #BFDDEE 40%, #BBDBED 50%, #BFDDEE 60%, #EBF4FA 100%) no-repeat;
background: -moz-linear-gradient(top, #EBF4FA 0, #BFDDEE 40%, #BBDBED 50%, #BFDDEE 60%, #EBF4FA 100%) no-repeat;
background: -o-linear-gradient(top, #EBF4FA 0, #BFDDEE 40%, #BBDBED 50%, #BFDDEE 60%, #EBF4FA 100%) no-repeat;
background: -ms-linear-gradient(top, #EBF4FA 0, #BFDDEE 40%, #BBDBED 50%, #BFDDEE 60%, #EBF4FA 100%) no-repeat;
-svg-background: linear-gradient(top, #EBF4FA 0, #BFDDEE 40%, #BBDBED 50%, #BFDDEE 60%, #EBF4FA 100%) no-repeat;
background: linear-gradient(to bottom, #EBF4FA 0, #BFDDEE 40%, #BBDBED 50%, #BFDDEE 60%, #EBF4FA 100%) no-repeat;

position: fixed;
z-index: 499;
width: 100%;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}

    Dreamweaver will do it for you Automatically. This will take you only 2-3 minutes.
I recommend keeping this code in NOTEPAD.
Do not forget to save the file open in Dreamweaver (style.css) in your project.
The second method is more correct, since it is possible to make errors manually.
Now replace the style.css file on the hosting with our new file.

And now your menu is motionless.

WEB DESIGN,
PROFESSIONAL HOSTINGS,
PROJECTS THE WORK AT HOME,
DIGITAL PRODUCTS FREE AND PREMIUM


© 2011 Real Business Studio - All rights reserved