loader image
+359879056549 office@edoms.bg

Compact Divi Sub-Menu

Уеб сайт изработка

One of the most common requests I see in the Elegant Themes User Community Facebook group is to have more design options for the sub-menus.

This is the first in a new series for different sub-menu options.

In this tutorial I will show you how to create and tweak Compact Divi Sub-menu as shown on the demo below, with just a little CSS.

Adding The Custom CSS

If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not, go to Appearance>Divi Theme Options>Custom CSS (which is located at the bottom of the first tab in Theme Options)

1. Add this CSS.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/*------------------------------------------------*/
/*-----------[GQ - COMPACT SUB-MENU]--------------*/
/*------------------------------------------------*/
/* drop down menu - level 1 */
    .nav li ul {
        width: 180px;
        padding: 0px;}
    .nav li li {
        line-height: 14px;}
    #top-menu li li {
        padding: 0 0px;}
    #top-menu li li a {
        font-size: 13px;
        width: 180px;
        padding: 5px 10px;
        font-weight: 300;}
/* drop down menu - level 2 */
    .nav li li ul {
        top: -3px;
        left: 180px;}
/* change drop down icon in submenus only */
    #top-menu li .menu-item-has-children > a:first-child:after {
        top: 6px;
        right: 5px;
        font-size: 14px;
        font-weight: 400;
        content: "5";}

 

 

Notes

If you want to change the width of the sub-menu, just modify this part of the css. All three of these should be the same width whichever width you choose.

compact divi sub-menus

 

If you want to change the font-size, line-height and font-weight, just modify these parts of the css.

compact divi sub-menu custom css

 

This part is the drop-down icon in the sub-menus. It changes it from a downward carrot to a right carrot which is the actual direction of the second level sub-menu. You can adjust font-size, font-weight and position here.

And that’s it.

If you used this on one of your projects, please share a link below so we can see how you used it.

Have fun!

Уеб сайт изработка, уеб сайт дизайн, SEO оптимизация, корпоративен сайт, информативен сайт, блог, онлайн магазин – ЕДОМС ЕООД – гр. София, ☎+359879056549

#Site #Web design #Webdesign #Web site #Website #Нов сайт #Новсайт #Поръчка на сайт #Сайт #Сайт изработка #Сайтове #Създай сайт #Уеб дизайн #Уебдизайн #Уеб сайт #Уебсайт #Уеб сайт изработка #Уебсайт изработка #Уеб сайтове

Раздели на бутони Divi [ИЗТЕГЛЯНЕ] Кодови фрагменти, Divi

Наскоро беше зададен въпрос в една от групите на Divi във Facebook за това как да се постигне определен ефект с помощта на Divi. Чрез манипулиране на родния модул Tabs с помощта на чист CSS успях да пресъздам желания ефект.

Ефект на персонализирани раздели Divi
Ето връзката за изтегляне на JSON файла, ако се интересувате да използвате това и във вашия проект.

Съдържание на файла
JSON файлът съдържа ROW, който има модул Tabs и модул Code, който съдържа допълнителния CSS, необходим за този ефект да работи.

Поставил съм CSS в модула Tab, където е възможно, за да запазя нещата възможно най-много в Divi, а допълнителният CSS, който не е имал място в модула Tab, е поставен в модула Code. Чувствайте се свободни да извлечете CSS в модула на кода във вашия собствен файл на тема style.css на вашата тема или да го поставите в полето CSS на панела Divi.

Икони
Иконите се вмъкват с помощта на CSS и кодът за тях е в модула Код. Ако искате да промените иконите, можете да намерите допълнителни unicodes за родната икона на Divi, зададена тук: https://www.elegantthemes.com/blog/resources/elegant-icon-font

Ако не сте запознати с работата с unicodes в CSS, имате нужда само от частта на unicode, която идва след „x“, и можете да пропуснете задната точка.

Например unicode за иконата на кредитна карта е:

& # xe014;
Всичко, от което се нуждаем от този unicode, е e014. Вижте модула Code, включен в CSS, за действително използване.