sticky menu

  • hello
    i need help making a sticky menu, the problem is i got a header above the menu so i hope you can help me out.
    here is my current menu code :
    css:

    ul li {float: left;}
ul li a {display:block; text-decoration:none; text-align:center; padding-top:24px; height: 36px; width: 110px; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300; font-size:8pt; color:#ffffff; text-transform:uppercase; border-right:1px solid #6FA921; background-color:#8DC73F; text-transform:uppercase; letter-spacing:.08em}
ul li a:hover {background-color:#6FA921; color:#B5EF67
}

ul li a.first {border-left:1px solid #6FA921;}
ul li a.last {border-right:0}

.current {
	width: 0;
	height: 0;
    padding-top:15px;
    padding-bottom: 0;
    margin-left:auto;
    margin-right:auto;
	border-left: 10px solid transparent;  /* left arrow slant */
	border-right: 10px solid transparent; /* right arrow slant */
	border-bottom: 10px solid #fff; /* bottom, add background color here */
	font-size: 0;
	line-height: 0;
}

.menuallign {
    margin-left: auto; margin-right: auto; width: 650px;
}

.logobar {
    width: 100%;
    background-color: #fff;
    padding-left:5px;
    margin-left: 5px;
}
menu {
    width: device-width;
    height: 60px;
    background-color: #8DC73F;
    margin-left: 0;
    margin-right: 0;
    padding-left:0 ;
    padding-right: 0;

    font-size: 12px;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    text-align: center;
}

    HTML:

    <menu>
        <div class="menuallign">
            <ul ondragstart="return false;" ondrop="return false;">

  <li><a class="first" href="#home">Home<div class="current"></div></a></li>
  <li><a href="#news">Dienstverlening</a>  </li>
  <li><a href="#contact">wie zijn wij</a></li>
  <li><a href="#about">referenties</a></li>
    <li><a href="#about">contact</a></li>
            </ul>
        </div>

    </menu>

    luke

Viewing 2 replies - 1 through 2 (of 2 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    the problem is i got a header above the menu

    So you need to provide us with the code that reflects this problem, if you can’t link us to the issue.

    Thread Starter lukeg01

    (@lukeg01)

    i tried

    position: fixed;
   z-index: 10;

    but i would cause the menu to stay on the place where it is in the beginning lower then the top, it needs to be on top

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘sticky menu’ is closed to new replies.