Problem z wyśrodkowaniem menu
-
Witam,
Chciałabym na tej stronie http://www.vanillamadness.com/ wyśrodkować drugie, główne menu (znajdujące się pod nagłówkiem), tak, żeby po prostu znajdujące się tam kategorie, niezależnie od tego ile ich będzie, były ładnie rozmieszczone na całej długości. Byłoby również miło, gdyby ktoś napisał mi co należałoby zrobić, żeby pozbyć się ttych szarych ramek w tym menu, tak aby pozostawał sam tekst.Poniżej zamieszczam fragment kodu z style.css, który moim zdaniem odpowiada za to menu
/* = Menu navigation ***************************************/ .is-sticky ._main_navigation{ z-index:99999; width:100%; } .boxed.active .is-sticky ._main_navigation{ width: 1140px; } ._main_navigation{ border-top:1px solid #ececec; border-bottom:1px solid #ececec; height:62px; position:relative; background:#fff; } .main_navigation{ height:60px; position:relative; } nav.main-navigation{ height:60px; width:100%; float:left; font-weight:400; line-height:16px; position:relative; margin:0px auto 0px; } nav.main-navigation > ul li{ display:inline-block; position:relative; } nav.main-navigation > ul li a{ color:#383838; line-height:20px; padding:20px 16px 20px 16px ; border-right:1px solid #ececec; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform:uppercase; outline:none; } nav.main-navigation > ul li a i{ font-size:12px; margin-left:5px; } nav.main-navigation li:hover > a, nav.main-navigation ul ul :hover > a { background:transparent; color: #dc2834; } nav.main-navigation ul li:hover > ul { display:block; -webkit-animation-duration: .3s; animation-duration: .3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeInDown; animation-name: fadeInDown; z-index: 9999px; } nav.main-navigation > ul li > ul{ display:none; position:absolute; padding:10px 0px 10px 0px; border-top:2px solid #dc2834; border-left:1px solid #ececec; border-right:1px solid #ececec; border-bottom:1px solid #ececec; background:#ececec; margin:0 0 0 0px; left:0; z-index: 9999; } nav.main-navigation > ul li > ul li { padding: 0 20px; margin:0; width:200px; background:none; } nav.main-navigation > ul li > ul li a{ display:block; border:none; padding:8px 0 } nav.main-navigation > ul li > ul li a{ } nav.main-navigation > ul li > ul ul{ display:none; position:absolute; margin:0px 0 0 1px; top:0; left:100%; z-index: 998; } nav.main-navigation > ul li > ul ul li a{ padding:8px 5px; } nav.main-navigation > ul li > ul li > ul li a{ /* border-bottom:1px solid #313131!important; */ } nav.main-navigation > ul li > ul li:last-child a, nav.main-navigation > ul li > ul li > ul li:last-child a { border-bottom:0px; } nav.main-navigation > ul li > ul li{ display:block; } nav.main-navigation > ul li:first-child{ background:none; } nav.main-navigation ul.nav li.current-menu-item{ } nav.main-navigation ul.nav li.current-menu-item a:hover, nav.main-navigation ul.nav .current-menu-item a{ color:#dc2834!important; } nav.main-navigation ul.nav ul li.current-menu-item{ background: url(img/sub_main_nav.png)!important; color: #dc2834!important; } nav.main-navigation ul.nav ul li.current-menu-item a{ color: #dc2834!important; } .smallmenu{ width:100%; z-index:11; text-align:center; display:none; } #dropmenu select{ background:transparent; border:1px solid #181b1e; border-radius:0; padding:10px!important; text-shadow: none!important; height:auto; margin-top:4px; -moz-box-shadow: none; -webkit-box-shadow:none; box-shadow: none; color:#999a9b; /* font-style:italic; font-size:13px; */ margin-bottom:4px; width:70%; } #dropmenu select:focus { border-color: #DC2834; box-shadow: 0px 0px 0px transparent; outline:none!important; }
- Temat ‘Problem z wyśrodkowaniem menu’ jest zamknięty na nowe odpowiedzi.