[Captain Thailand]

Hej,

Jag håller på att försöka fixa till en stilig meny i CSS. Pga begränsad kunskap (imbecillitet?) har jag kört fast.

Så här ser den ut i nuläget: http://yenit.com/cssmenu

Jag vill helst att menyn skall följa med när man scrollar och därför la jag in:

position: fixed;
top: 70px;

Detta funkade på så sätt att menyn hamnade där den skulle och hängde med när man scrollade, men det förstörde (förstås) dess utseende/design totalt.

Finns det någon quick-fix för detta, eller borde jag låta någon kompetent person fixa detta åt mig mot betalning?

Här är CSS:en (när jag tagit bort fixed, som förstörde designen).

<style type="text/css">
<!--
body, td, th {
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
font-size: 18px;
color: #777572;
text-shadow: 1px 1px 0px #fff;
}
body {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
}
a:link {
text-decoration: none;
color: #cb8b93;
font-weight: bold;
}
a:visited {
text-decoration: none;
color: #cb8b93;
font-weight: bold;
letter-spacing: 1px;
}
a:hover {
text-decoration: none;
color: #777572;
font-weight: bold;
}
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
content: '.';
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
width: 440px;
font-family: 'Montserrat', Helvetica, sans-serif;
}
#cssmenu > ul {
background: url('kindajean03.png');
box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.05);
}
#cssmenu > ul > li {
float: left;
}
#cssmenu > ul > li > a {
padding: 29px 14px 29px 14px;
border-right: 1px solid rgba(80, 80, 80, 0.12);
text-decoration: none;
font-size: 25px;
font-weight: 700;
color: #cb8b93;
text-transform: uppercase;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li.active > a {
color: #777572;
background: #b8adaa;
background: rgba(0, 0, 0, 0.1);
}
#cssmenu > ul > li.has-sub > a {
padding-right: 45px;
}
#cssmenu > ul > li.has-sub > a::after {
content: '';
position: absolute;
width: 0;
height: 0;
border: 6px solid transparent;
border-top-color: #cb8b93;
right: 20px;
top: 36px;
}
#cssmenu > ul > li.has-sub.active > a::after,
#cssmenu > ul > li.has-sub:hover > a {
border-top-color: #ff0000;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
top: 60px;
padding-top: 6px;
font-size: 16px;
font-weight: 400;
opacity: 0;
-webkit-transition: top 0.2s ease, opacity 0.2s ease-in;
-moz-transition: top 0.2s ease, opacity 0.2s ease-in;
-ms-transition: top 0.2s ease, opacity 0.2s ease-in;
-o-transition: top 0.2s ease, opacity 0.2s ease-in;
transition: top 0.2s ease, opacity 0.2s ease-in;
}
#cssmenu > ul > li > ul::after {
content: '';
position: absolute;
width: 0;
height: 0;
border: 5px solid transparent;
border-bottom-color: #fff;
top: -4px;
left: 20px;
}
#cssmenu ul ul ul::after {
content: '';
position: absolute;
width: 0;
height: 0;
border: 5px solid transparent;
border-right-color: #fff;
top: 11px;
left: -4px;
}
#cssmenu > ul > li > ul {
top: 120px;
}
#cssmenu > ul > li:hover > ul {
top: 61px;
left: 0;
opacity: 1;
}
#cssmenu ul ul ul {
padding-top: 0;
padding-left: 0px;
}
#cssmenu ul ul > li:hover > ul {
left: 156px;
top: 0;
opacity: 1;
}
#cssmenu ul ul li a {
text-decoration: none;
font-weight: 400;
padding: 11px 25px;
width: 150px;
color: #cb8b93;
background: #fff;
left: 6px;
background: url('kindajean02.png');
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1), 1px 1px 1px rgba(0, 0, 0, 0.1), -1px 1px 1px rgba(0, 0, 0, 0.1);
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.active > a {
color: #777572;
}
#cssmenu ul ul li:first-child > a {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
#cssmenu ul ul li:last-child > a {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
#cssmenu > ul > li > ul::after {
position: absolute;
display: block;
}
#cssmenu ul ul li.has-sub > a::after {
content: '';
position: absolute;
width: 0;
height: 0;
border: 4px solid transparent;
border-left-color: #cb8b93;
right: 17px;
top: 14px;
top: 14.5px;
}
#cssmenu ul ul li.has-sub.active > a::after,
#cssmenu ul ul li.has-sub:hover > a::after {
border-left-color: #777572;
}
@media all and (max-width: 350px) {
#cssmenu {
background: #bfb5b2;
}
#cssmenu > ul {
display: none;
}
#cssmenu > ul.open {
display: block;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
#cssmenu > ul > li {
float: none;
}
#cssmenu > ul > li > a {
padding: 18px 25px 18px 25px;
border-right: 0;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.active > a {
background: rgba(0, 0, 0, 0.1);
}
#cssmenu #menu-button {
display: block;
text-decoration: none;
font-size: 13px;
font-weight: 700;
color: #fff;
padding: 18px 25px 18px 25px;
text-transform: uppercase;
letter-spacing: 1px;
background: url('kindajean02.png');
cursor: pointer;
}
#cssmenu ul ul,
#cssmenu ul li:hover > ul,
#cssmenu > ul > li > ul,
#cssmenu ul ul ul,
#cssmenu ul ul li:hover > ul {
left: 0;
top: auto;
opacity: 1;
width: 100%;
padding: 0;
position: relative;
}
#cssmenu ul ul li {
width: 100%;
}
#cssmenu ul ul li a {
width: 100%;
box-shadow: none;
padding-left: 35px;
}
#cssmenu ul ul ul li a {
padding-left: 45px;
}
#cssmenu ul ul li:first-child > a,
#cssmenu ul ul li:last-child > a {
border-radius: 0;
}
#cssmenu #menu-button::after {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
background: url('kindajean02.png');
right: 25px;
top: 18px;
}
#cssmenu #menu-button::before {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #fff;
right: 25px;
top: 28px;
}
#cssmenu > ul > li.has-sub > a::after,
#cssmenu ul ul li.has-sub > a::after {
display: none;
}
}
-->

Tacksam för all form av konstruktiv feedback. Att jag inte riktigt hajjar det här med CSS är jag redan väl medveten om

[Captain Thailand]

Ps. Själva uppslaget och grundkoden fick jag här:

http://cssmenumaker.com

Pga nämnda okunskap är jag inte riktigt säker på alla variablar osv. Det är mycket möjligt att jag stökat till i koden när jag försökt ändra menyns utseende (radikalt).

[Stahla]

Testade att lägga till position: fixed och dylikt i din meny via utvecklarverktyget direkt i webbläsaren men kunde inte se något fel. Har du lyckats att åtgärda problemet i din kod eller skulle du kunna visa när det blir fel?

[Captain Thailand]

Stahla,

Jag testade en hel del, men det var något som felade...

En vän här har lovat att kika på det. Jag avvaktar lite och ser vad han säger.

TACK för ditt engagemang!

[Stahla]

Okej! Återkom om det är några bekymmer annars. Kan vara som en så enkel sak som att du satte position: fixed; på ett element som behöver relative för att resten av menyn ska funka som tänkt.