Блог

я работаю над сайтом WordPress и хотел бы использовать пользовательский CSS, чтобы добавить фоновое изображение за моим меню? и хотелось бы знать, как добавить разделители в меню, чтобы после каждого элемента ссылки в меню автоматически создавался разделитель?

что я сделал, так это

 .menu{
  background-image: url("abolutepath/header-navigation-bar-bg.png"); 
 }
 

и это работает, меню и фон отображаются, но проблемы заключаются в следующем: a. изогнутый конец фона меню не отображается справа, так как меню заканчивается на полпути, я хочу показать все фоновое изображение, как под меню b. на мобильном устройстве меню повторяется и отображает всенеправильно, так есть ли способ исключить это фоновое изображение и разделители из адаптивной версии меню / сайта в одном блоке css-кода?

Пожалуйста, помогите, спасибо

Вы можете использовать медиа-запрос для настройки css в соответствии с размером экрана устройства

 @media screen and (max-device-width: 480px) {
    .menu{
        // CSS for mobile device or small screen size
        background-image: url("abolutepath/header-navigation-bar-bg.png"); 
    }
}

@media screen and (min-device-width: 480px) and (max-device-width: 960px) {
    .menu{
        // CSS for other device
    }
}
 

Что касается того, как добавить разделители в меню, которое вы можете добавить в тег привязки в li

 border-right: 1px solid #ccc;
 

и удалите границу из последнего меню, как показано ниже :-

 li:last-child a {border-right: none;}
 

Чтобы добавить изображение, попробуйте ниже :-

 #nav li   li {
    background:url('seperator.gif') no-repeat top left;
    padding-left: 10px
}