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

[tyvkaaa]

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

 

[D&B]

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

 

[tyvkaaa]

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

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

 

[qwer]

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

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

 

[tyvkaaa]

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

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

 

[qwer]

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

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

Лично мне результат не понравился, потому что появилось очень много свободного пространства слева. Но туда можно добавить какой-нибудь логотип, поэтому, можно считать и "+".
Возможно, другие участники форума подскажут более правильное решение для вашей проблемы.

 

[tuxfighter]

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

И вы далеко не превая, кто советуют сменить эту "странную" тему на что-то более вменяемое -))

 

[qwer]

И вы далеко не первая, кто советуют сменить эту "странную" тему на что-то более вменяемое -))

Сама тема только и просится, чтобы её заменили

 

[tyvkaaa]

Сама тема только и просится, чтобы её заменили

Как временное решение, попробуйте подвинуть меню с помощью "margin-left: 480px; (подбирайте px)"
Но это жирный костыль.
Пропишите через медиа запросы для экранов такое свойство, чтобы ваше мобильное меню оставалось на месте и никуда не уходило, а свойство влияло только на десктопную версию сайта.
В скрине я выделила какие элементы нужно редактировать. Должно сработать.
Посмотреть вложение 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]

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

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

Спойлер: Обязательно для ознакомления

Новичкам
Первые шаги
https://aleksnovikov.ru/video-uroki-wordpress
http://isif-life.ru/web/kak-redaktirovat-shablon-wordpress-samomu.html
http://wpcreate.ru/step/shag-6-redaktirovanie-shablona-wordpress-chast-1.html
http://pro-wordpress.ru/nastrojka-w...ovat-shablon-wordpress-struktura-shablona.php
https://texterra.ru/blog/kak-sozdat-sayt-na-wordpress-polnoe-rukovodstvo-dlya-novichkov.html

 

[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]

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

Спойлер: Обязательно для ознакомления

Новичкам
Первые шаги
https://aleksnovikov.ru/video-uroki-wordpress
http://isif-life.ru/web/kak-redaktirovat-shablon-wordpress-samomu.html
http://wpcreate.ru/step/shag-6-redaktirovanie-shablona-wordpress-chast-1.html
http://pro-wordpress.ru/nastrojka-w...ovat-shablon-wordpress-struktura-shablona.php
https://texterra.ru/blog/kak-sozdat-sayt-na-wordpress-polnoe-rukovodstvo-dlya-novichkov.html

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

 

[qwer]

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

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

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

Надеюсь, смогла помочь.