#lol a, #lol:hover, #lol a:link { margin-left: 450px !important;}
Через маргины это конечно вариант, но проблема будет потом, что если добавить в меню пункт, то мои кнопки еще больше сдвинуться. Это функция не добавляет menu-itemXXX... Мы решили проблему, точнее ее помог мне решить товарищ ffreest , огромное ему спасибо. Если кому нужно выложу сюда правки.Как мы это решили, в кратце - создали доп [ul], и привязали к нему css class, вставили функцию php, из function убрали фильтр.
Добавил id к li, прописал в css сам сдвиг, но вот как теперь запозиционировать "Войти" относительно "Регистрации"
//добавляем нужные кнопки в меню add_filter('wp_nav_menu_items', 'add_login_logout_link', 10, 2); function add_login_logout_link($items, $args) { $loginoutlink = wp_loginout('index.php', false); if(!is_user_logged_in()) $items .= '<li id="lol"><a href="wordpress/reg/">Регистрация</a></li>'; else $items .= '<li><a href="/wordpress/wp-admin/">Кабинет Автора</a></li>'; $items .= '<li>'. $loginoutlink .'</li>'; return $items; }
.main-menu { font-family: 'Roboto Slab', sans-serif; font-size: 0.9em; text-align: center; } .main-menu li { position: relative; } .main-menu > li { float: left; } .main-menu > li:before { content: "/"; display: block; position: absolute; right: 0; top: 50%; margin-top: -9px; margin-right: -3px; font-size: 16px; color: #13c4a5; font-weight: 300; z-index: 1000; } .main-menu > li:last-child:before { content: none; right: auto; } .main-menu > li > a { display: block; padding: 27px; font-size: 0.85em; color: #fff; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; } .main-menu > li:first-child > a { margin-left: 0; } .main-menu > .has-children > a, .main-menu > .page_item_has_children > a { padding-right: 47px; position: relative; } .main-menu > .has-children > a::after, .main-menu > .page_item_has_children > a::after { content: ""; display: block; border: 5px solid transparent; border-top-color: #fff; position: absolute; z-index: 1001; right: 29px; top: 50%; margin-top: -2px; } #lol { position: absolute; right: 20%; }
А это что?
<iframe width="560" height="315" src="https://www.youtube.com/embed/xxxxxxxxxxxx" frameborder="0" allowfullscreen></iframe>
убрать ламповую няшу.
Как я понял, мы условно делим картинку пополам, привязываем центр, а привязка будет уже по левому краю (1/2 = -354px).
Сейчас у меня реализовано вот так: https://jsfiddle.net/82nq9jug/7/
Это по сути тоже самое,я попробовал как вы написали, но проблема в том,что при изменении разрешения экрана картинка не меняет свои размеры, она статична.
https://jsfiddle.net/82nq9jug/4/
Андрей, надеюсь вы поможете. Хотя возможно есть смысл в уменьшении картинки ниже 600 по монитору
попробуй переименовать для начала. А вот насчет плагина, это наверное нужно у разраба спрашивать.
Применил твой совет к логотипу, но лого у меня не простое, а меняется при наведении (Png трюк с прозрачностью) Но вот выплыла проблема, как поставить теперь лого по центру нашего фона? надеюсь поможешь с данной проблемой
Понял, возникли другие проблемы:
1) Логотип в формате png, но не на прозрачном фоне, потому что если сделать прозрачны, то 1 картинка наложится на другую. Проблема в том что под картинкой фон css, и вокруг моего png, появляется окантовка, как пофиксить такую проблему? единственное что приходит в голову- это не использовать фон и сделать на всю ширину лого, но это минус в скорость загрузки.
2) Резиновая верстка. Чтобы лого изменяло размер.
ну да html, какая его функция?
