Navigation

[davy_yg]

Hello,

I have this navigation:

navigation.php

<div id="navigation"><!-- <img src="images/navigation bar.jpg" alt="nav bar"> --></div> 

<div id="navcontainerbar">
<ul>

<li><a href="index.php">HOME</a></li>


    <ul id="nav">
        <li><a class="fly" href="#">PORTFOLIO</a>
            <ul class="dd">
                <li><a href="portfolio.php">Web Porfolio</a></li>
                <li><a href="marketing-portfolio.php">Marketing Portfolio</a></li>             
            </ul>
        </li>     
    </ul>  


<li><a href="services.php">SERVICES</a></li>
<li><a href="blog.php">BLOG</a></li>
<li><a href="contact.php">CONTACT</a></li>

</ul>
</div>

style.css

/* navigation */

#navigation {margin: 20px 0 0 280px; width: 700px; height: 50px; background-color: yellow; border-radius: 10px;}

#navcontainerbar { margin: -30px 0 0 0;}
#navcontainerbar ul { margin: 0 0 0 0; list-style-type: none; margin: 0; padding: 0; text-align: center; }

#navcontainerbar ul li { display: inline; font-family:arial;}
#navcontainerbar ul li a { text-decoration: none; padding: .2em 1em; color:black;  background-color: green;}
#navcontainerbar ul li a:hover { color:white; background-color:orange; }

Everything works fine, until I insert a popup navigation button between index & service menu button. Therefore, I have to shift my service menu to the right so that I won't overlap my portfolio menu.

I have it in my localhost (with the portfolio menu - unless it overlaps the service menu).

This is my temporary view without the portfolio menu (online): website

[gabrielcastillo]

you can start by wrapping you ul#nav in a li item and setting the display to none.

[davy_yg]

litterarily, how? how to wrap my ul#nav in a li item?

[gabrielcastillo]

like so.

<li>

    <ul  id="nav">
        <li>item<li>
    </ul>

</li>

[davy_yg]

I don't understand how to apply it to my code. All I need is to shift service, blog and contact to the right.

I have portfolio appears in my offline code, only that it overlap service button.

[gabrielcastillo]

You can not have ul inside a ul you need to wrap you ul in a li tag like so.

    <div id="navigation"><!-- <img src="images/navigation bar.jpg" alt="nav bar"> --></div>
    <div id="navcontainerbar">
    <ul>
        <li><a href="index.php">HOME</a></li>
        <li>
            <ul id="nav">
                <li><a class="fly" href="#">PORTFOLIO</a>
                    <ul class="dd">
                        <li><a href="portfolio.php">Web Porfolio</a></li>
                        <li><a href="marketing-portfolio.php">Marketing Portfolio</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="services.php">SERVICES</a></li>
        <li><a href="blog.php">BLOG</a></li>
        <li><a href="contact.php">CONTACT</a></li>
    </ul>
    </div>

[davy_yg]

I still do not see service shifting to the right.

I try this:

navigation.php

<div id="navigation"><!-- <img src="images/navigation bar.jpg" alt="nav bar"> --></div> 

<div id="navcontainerbar">
<ul>

<li><a href="index.php">HOME</a></li>
    <li>

    <ul id="nav">
        <li><a class="fly" href="#">PORTFOLIO</a>
            <ul class="dd">
                <li><a href="portfolio.php">Web Porfolio</a></li>
                <li><a href="marketing-portfolio.php">Marketing Portfolio</a></li>             
            </ul>
        </li>     
    </ul>

    </li>    
<li class="service"><a href="services.php">SERVICES</a></li>
<li><a href="blog.php">BLOG</a></li>
<li><a href="contact.php">CONTACT</a></li>

</ul>
</div>

style.css

/* css style for Innovation */


#container {width: 1024px; margin: 0 auto; background-color:white;}

#logo {margin: 10px 0 0 20px;}
#proyek {margin: -15px 0 0 550px;}
#coffee {margin: -80px 0 0 920px;}

/* navigation */

#navigation {margin: 20px 0 0 280px; width: 700px; height: 50px; background-color: yellow; border-radius: 10px;}

#navcontainerbar { margin: -30px 0 0 0;}
#navcontainerbar ul { margin: 0 0 0 0; list-style-type: none; margin: 0; padding: 0; text-align: center; }

#navcontainerbar ul li { display: inline; font-family:arial;}

#navcontainerbar ul li .service{ margin: 0 0 0 100px; display: inline; font-family:arial;}

#navcontainerbar ul li a { text-decoration: none; padding: .2em 1em; color:black;  background-color: green;}
#navcontainerbar ul li a:hover { color:white; background-color:orange; }

It still do not shift service to the right, I wonder why?

[gabrielcastillo]

Not sure what you are trying to do, I get this when I run your code.

link

[davy_yg]

ok, I didn't give you the whole style.css for navigation. Here it is:

style.css

/* navigation */

#navigation {margin: 20px 0 0 280px; width: 700px; height: 50px; background-color: yellow; border-radius: 10px;}

#navcontainerbar { margin: -30px 0 0 0;}
#navcontainerbar ul { margin: 0 0 0 0; list-style-type: none; margin: 0; padding: 0; text-align: center; }

#navcontainerbar ul li { display: inline; font-family:arial;}
#navcontainerbar ul li .service{ margin: 0 0 0 100px; display: inline; font-family:arial;}
#navcontainerbar ul li a { text-decoration: none; padding: .2em 1em; color:black;  background-color: green;}
#navcontainerbar ul li a:hover { color:white; background-color:orange; }

/* navigation pop up */

/* main menu styles */
/*
#nav,#nav ul {
    background-image:url(./images/tr75.png);
    list-style:none;
    margin:0;
    padding:0;
}
*/
#nav {
    height:41px;
    padding-left:5px;
    padding-top:5px;
    position:absolute;
    z-index:2;
}
#nav ul {
    left:-9999px;
    position:absolute;
    top:10px;
    width:auto;
}

#nav ul ul {
    left:-9999px;
    position:absolute;
    top:0;
    width:auto;
}

#nav li {
    margin: 150px 0 0 250px;
    float:left;
    margin-right:5px;
    position:relative;
}
#nav li a {
    margin: -180px 0 0 140px;
    background:#c1c1bf;
    color:#000;
    display:block;
    float:left;
    font-size:16px;
    padding:0px;
    text-decoration:none;
}
#nav > li > a {
    -moz-border-radius:0px;
    -webkit-border-radius:0px;
    -o-border-radius:0px;
    border-radius:10px;
    overflow:hidden;
}
#nav li a.fly {
    background-color: #c8fa7f;
    z-index: 2;
}
#nav ul li {
    margin: 30px 0 0 0;
}
#nav ul li a {
    width:120px;
}
#nav ul li a.fly {
    padding-right:10px;
}

/*hover styles*/
#nav li:hover > a {
    background-color: #c8fa7f;
    color:#fff;
}

/*focus styles*/
    #nav li a:focus {
    outline-width:0;
}

/*popups*/
#nav li a:active + ul.dd,#nav li a:focus + ul.dd,#nav li ul.dd:hover {
    left:0; z-index: 2;
}
#nav ul.dd li a:active + ul,#nav ul.dd li a:focus + ul,#nav ul.dd li ul:hover {
    left:140px;
}

/* navigation pop up end */