• Никакой политики на форуме. Иначе - бан!
  • Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией!
  • Темы озаглавленные с маленькой буквы или капсом удаляются без предупреждения!

Решено Как поместить меню (категории по середине)

tyvkaaa

Форумчанин
Добрый день. Хотела бы передвинуть меню, а именно категории в шапке сайта (скриншот прилагается) к середине. Подскажите как это сделать?
.jpg
 

D&B

Администратор
Команда форума
Местный
Создайте новое меню и поместите туда нужные категории. Его и выводите.
 

qwer

Специалист
Местный
Вы наверно не поняли, мне нужно в этой серой линии передвинуть меню в середину, т.е. в середину серой линии

Предоставьте ссылку на сайт. Может и можно его передвинуть.
Вообще скорее всего вам стоит смотреть в сторону @media для редактирования вашей темы. И пропорционально изменить размеры вашего меню для разных устройств.
А лучше взять адаптивную тему сразу, чтобы не было этих проблем. Вы тратите на них намного больше времени, чем на разработку функционала или настройку плагинов.
Это вам дружеский совет такой.
 

tyvkaaa

Форумчанин
Предоставьте ссылку на сайт. Может и можно его передвинуть.
Вообще скорее всего вам стоит смотреть в сторону @media для редактирования вашей темы. И пропорционально изменить размеры вашего меню для разных устройств.
А лучше взять адаптивную тему сразу, чтобы не было этих проблем. Вы тратите на них намного больше времени, чем на разработку функционала или настройку плагинов.
Это вам дружеский совет такой.
Спасибо за совет, но к сожалею на сл неделе уже сдавать сайт (на работе попросили) и времени на переделку уже нет. Вот сайт: http://saladdrive.macpizza.by/
 

qwer

Специалист
Местный
Спасибо за совет, но к сожалею на сл неделе уже сдавать сайт (на работе попросили) и времени на переделку уже нет. Вот сайт: http://saladdrive.macpizza.by/

Как временное решение, попробуйте подвинуть меню с помощью "margin-left: 480px; (подбирайте px)"
Но это жирный костыль. :notworthy:
Пропишите через медиа запросы для экранов такое свойство, чтобы ваше мобильное меню оставалось на месте и никуда не уходило, а свойство влияло только на десктопную версию сайта.
В скрине я выделила какие элементы нужно редактировать. Должно сработать.
menu-center.png
Лично мне результат не понравился, потому что появилось очень много свободного пространства слева. Но туда можно добавить какой-нибудь логотип, поэтому, можно считать и "+".
Возможно, другие участники форума подскажут более правильное решение для вашей проблемы.
 

tyvkaaa

Форумчанин
Сама тема только и просится, чтобы её заменили :whistle:
Как временное решение, попробуйте подвинуть меню с помощью "margin-left: 480px; (подбирайте px)"
Но это жирный костыль. :notworthy:
Пропишите через медиа запросы для экранов такое свойство, чтобы ваше мобильное меню оставалось на месте и никуда не уходило, а свойство влияло только на десктопную версию сайта.
В скрине я выделила какие элементы нужно редактировать. Должно сработать.
Посмотреть вложение 3024
Лично мне результат не понравился, потому что появилось очень много свободного пространства слева. Но туда можно добавить какой-нибудь логотип, поэтому, можно считать и "+".
Возможно, другие участники форума подскажут более правильное решение для вашей проблемы.
Не могли бы вы сказать, в каком документе это нужно исправить?
 

qwer

Специалист
Местный
Не могли бы вы сказать, в каком документе это нужно исправить?

Файл style.css вашей темы. Или можно править сразу в вашей теме "Настроить > Дополнительные стили".
Рекомендую данную правку внести всё таки в файл, там будет удобнее. И не забудьте указать @media
Что-то вроде такого:
Код:
/*Охват мониторов от 1024 и для всех остальных разрешений*/
@media only screen and (min-width: 1024px)  {
#primary-menu.nav {
    margin-left:480px;
}
}
 /*Количество пикселей поправьте самостоятельно*/
/*Разрешение экрана подберите самостоятельно*/

Ещё можно так, объявляя чётки рамки правила
Код:
/*Охват мониторов с разрешением от и до*/
@media only screen and (min-width: 1024px) and (max-width: 1366px)  {
#primary-menu.nav {
    margin-left:410px;
}
}
 /*Количество пикселей поправьте самостоятельно*/
/*Разрешение экрана подберите самостоятельно*/

Или как-нибудь так для больших мониторов
Код:
/*И например охват каких-то больших экранов*/
@media only screen and (min-width: 1920px) {
#primary-menu.nav {
    margin-left:520px;
}
}
 /*Количество пикселей поправьте самостоятельно*/
/*Разрешение экрана подберите самостоятельно*/

Пробуйте.
Почему строит протестировать как изменение будет на разном разрешении экранов:
Потому что размер задан в пикселях и для каких-то экранов отступ может быть большим, для других маленьким. Поэтому подбирать придется только исходя из того как будет вести себя ваше меню.

P.S. Надеюсь, вы используете дочернюю тему, иначе после обновления темы от разработчика все ваши изменения не сохранятся.
 
Последнее редактирование:

tyvkaaa

Форумчанин
Файл style.css вашей темы. Или можно править сразу в вашей теме "Настроить > Дополнительные стили".
Рекомендую данную правку внести всё таки в файл, там будет удобнее. И не забудьте указать @media
Что-то вроде такого:
Код:
/*Охват мониторов от 1024 и для всех остальных разрешений*/
@media only screen and (min-width: 1024px)  {
#primary-menu.nav {
    margin-left:480px;
}
}
 /*Количество пикселей поправьте самостоятельно*/
/*Разрешение экрана подберите самостоятельно*/

Ещё можно так, объявляя чётки рамки правила
Код:
/*Охват мониторов с разрешением от и до*/
@media only screen and (min-width: 1024px) and (max-width: 1366px)  {
#primary-menu.nav {
    margin-left:410px;
}
}
 /*Количество пикселей поправьте самостоятельно*/
/*Разрешение экрана подберите самостоятельно*/

Или как-нибудь так для больших мониторов
Код:
/*И например охват каких-то больших экранов*/
@media only screen and (min-width: 1920px) {
#primary-menu.nav {
    margin-left:520px;
}
}
 /*Количество пикселей поправьте самостоятельно*/
/*Разрешение экрана подберите самостоятельно*/

Пробуйте.
Почему строит протестировать как изменение будет на разном разрешении экранов:
Потому что размер задан в пикселях и для каких-то экранов отступ может быть большим, для других маленьким. Поэтому подбирать придется только исходя из того как будет вести себя ваше меню.

P.S. Надеюсь, вы используете дочернюю тему, иначе после обновления темы от разработчика все ваши изменения не сохранятся.
а что значит дочернюю тему?? я просто новичок в этом и не совсем понимаю.
 

tyvkaaa

Форумчанин
Файл style.css вашей темы. Или можно править сразу в вашей теме "Настроить > Дополнительные стили".
Рекомендую данную правку внести всё таки в файл, там будет удобнее. И не забудьте указать @media
Что-то вроде такого:
Код:
/*Охват мониторов от 1024 и для всех остальных разрешений*/
@media only screen and (min-width: 1024px)  {
#primary-menu.nav {
    margin-left:480px;
}
}
 /*Количество пикселей поправьте самостоятельно*/
/*Разрешение экрана подберите самостоятельно*/

Ещё можно так, объявляя чётки рамки правила
Код:
/*Охват мониторов с разрешением от и до*/
@media only screen and (min-width: 1024px) and (max-width: 1366px)  {
#primary-menu.nav {
    margin-left:410px;
}
}
 /*Количество пикселей поправьте самостоятельно*/
/*Разрешение экрана подберите самостоятельно*/

Или как-нибудь так для больших мониторов
Код:
/*И например охват каких-то больших экранов*/
@media only screen and (min-width: 1920px) {
#primary-menu.nav {
    margin-left:520px;
}
}
 /*Количество пикселей поправьте самостоятельно*/
/*Разрешение экрана подберите самостоятельно*/

Пробуйте.
Почему строит протестировать как изменение будет на разном разрешении экранов:
Потому что размер задан в пикселях и для каких-то экранов отступ может быть большим, для других маленьким. Поэтому подбирать придется только исходя из того как будет вести себя ваше меню.

P.S. Надеюсь, вы используете дочернюю тему, иначе после обновления темы от разработчика все ваши изменения не сохранятся.
я просто установила шаблон этой темы на вордпресс и все.
 

qwer

Специалист
Местный
а что значит дочернюю тему?? я просто новичок в этом и не совсем понимаю.

Рекомендую создать её и перенести все ваши изменения в дочернюю тему. Это очень важно.
Что это такое и как это сделать, можете прочесть тут и тут, а ещё тут.
 

qwer

Специалист
Местный
я просто установила шаблон этой темы на вордпресс и все.

Тогда вам стоит ознакомиться ещё и с такими ресурсами.
Если что-то делать, то нужно понимать что именно вы делаете.
Рекомендации тут:
 

tyvkaaa

Форумчанин
Файл style.css вашей темы. Или можно править сразу в вашей теме "Настроить > Дополнительные стили".
Рекомендую данную правку внести всё таки в файл, там будет удобнее. И не забудьте указать @media
Что-то вроде такого:
Код:
/*Охват мониторов от 1024 и для всех остальных разрешений*/
@media only screen and (min-width: 1024px)  {
#primary-menu.nav {
    margin-left:480px;
}
}
 /*Количество пикселей поправьте самостоятельно*/
/*Разрешение экрана подберите самостоятельно*/

Ещё можно так, объявляя чётки рамки правила
Код:
/*Охват мониторов с разрешением от и до*/
@media only screen and (min-width: 1024px) and (max-width: 1366px)  {
#primary-menu.nav {
    margin-left:410px;
}
}
 /*Количество пикселей поправьте самостоятельно*/
/*Разрешение экрана подберите самостоятельно*/

Или как-нибудь так для больших мониторов
Код:
/*И например охват каких-то больших экранов*/
@media only screen and (min-width: 1920px) {
#primary-menu.nav {
    margin-left:520px;
}
}
 /*Количество пикселей поправьте самостоятельно*/
/*Разрешение экрана подберите самостоятельно*/

Пробуйте.
Почему строит протестировать как изменение будет на разном разрешении экранов:
Потому что размер задан в пикселях и для каких-то экранов отступ может быть большим, для других маленьким. Поэтому подбирать придется только исходя из того как будет вести себя ваше меню.

P.S. Надеюсь, вы используете дочернюю тему, иначе после обновления темы от разработчика все ваши изменения не сохранятся.
Огромное вам спасибо, с меню получилось!!!))
 

tyvkaaa

Форумчанин
Тогда вам стоит ознакомиться ещё и с такими ресурсами.
Если что-то делать, то нужно понимать что именно вы делаете.
Рекомендации тут:
Подскажите, после создания дочерней темы, файл style.css должен быть вот таким? Я имею ввиду только эта шапка должна быть и все?
4444.jpg
 

qwer

Специалист
Местный
Подскажите, после создания дочерней темы, файл style.css должен быть вот таким? Я имею ввиду только эта шапка должна быть и все?
4444.jpg

Не совсем. В этом файле должны быть все изменения которые вы вносили на сайт.
Я тут не подскажу уже, где их могли добавлять у вас на сайте. По дефолту они всегда должны быть в файле style.css

В данном случае у вас только копирайт, который скажет WP что вы используете дочернюю тему.
Для полной уверенности я просто переносила всегда целый файл (его содержимое, до копирайта), чтобы в родительской теме его не подсматривать и модифицировать уже у себя, изменяя стили и добавляя сразу в файле.
Рекомендую и вам поступить так же.
Ещё, нужно всё что вы могли вносить на сайте через Настроить > Дополнительные стили, тоже переместить в этот файл. Потому что когда вы установите свою тему, эти данные затрутся.
Так же, советую просмотреть всё что вы настраивали в админке, потому что опять таки, после подключение этой дочерней темы, все настройки придется настраивать заново.

Надеюсь, смогла помочь.
 
Сверху Снизу