plscomeback

#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, какая его функция?