EduardET

bbPress CSS code for the header area

Sep 8th, 2022
711
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 4.85 KB | None | 0 0
  1. .bbp-view.bbpress.archive #main-header {
  2.     background-color: transparent;
  3.     backdrop-filter: blur(10px);
  4.     position: fixed;
  5.     left: 0;
  6.     width: 100%;
  7.     z-index: 1;
  8. }
  9.  
  10. .bbp-view.bbpress.archive #et_top_search,
  11. .bbp-view.bbpress.archive .et_search_outer,
  12. .bbp-view.bbpress.archive .select_page {
  13.     display: none;
  14. }
  15.  
  16. .bbp-view.bbpress.archive #main-header .et_menu_container {
  17.     display: flex;
  18.     align-items: stretch;
  19.     width: 95%;
  20.     max-width: 95%;
  21.     padding-top: 5px;
  22. }
  23.  
  24. @media (min-width: 981px) {
  25.     .bbp-view.bbpress.archive .logo_container {
  26.         flex: 0 1 auto;
  27.         display: flex;
  28.         align-items: center;
  29.     }
  30.  
  31.     .bbp-view.bbpress.archive .logo_container img {
  32.         width: 120px
  33.     }
  34.  
  35.     .bbp-view.bbpress.archive #et-top-navigation {
  36.         flex: 1 1 auto;
  37.         display: flex;
  38.         justify-content: flex-start;
  39.         align-items: stretch;
  40.         flex-wrap: wrap;
  41.         opacity: 1;
  42.         padding-left: 0 !important;
  43.     }
  44.  
  45.     .bbp-view.bbpress.archive #top-menu {
  46.         display: flex;
  47.         flex-wrap: wrap;
  48.         justify-content: flex-start;
  49.         align-items: stretch;
  50.  
  51.     }
  52.  
  53.     .bbp-view.bbpress.archive #top-menu li {
  54.         position: relative;
  55.         display: flex;
  56.         align-items: stretch;
  57.         margin: 0;
  58.         padding-left: 11px;
  59.         padding-right: 11px;
  60.     }
  61.  
  62.     .bbp-view.bbpress.archive #top-menu li > a {
  63.         display: flex;
  64.         align-items: center;
  65.         padding: 31px 0;
  66.         white-space: nowrap;
  67.         color: #666666;
  68.     }
  69.  
  70.     .bbp-view.bbpress.archive #top-menu li > ul {
  71.         position: absolute;
  72.         padding: 20px 0;
  73.         z-index: 9999;
  74.         width: 240px;
  75.         background: #fff;
  76.         visibility: hidden;
  77.         opacity: 0;
  78.         border-top: 3px solid #2ea3f2;
  79.         box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
  80.         -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
  81.         -webkit-box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
  82.         -webkit-transform: translateZ(0);
  83.         text-align: left;
  84.         top: calc(100% - 1px);
  85.         left: 0;
  86.     }
  87.  
  88.     .bbp-view.bbpress.archive #top-menu li:hover > ul {
  89.         transition: all .2s ease-in-out;
  90.         opacity: 1;
  91.         visibility: visible;
  92.     }
  93.  
  94.     .bbp-view.bbpress.archive #top-menu li > ul > li {
  95.         position: relative;
  96.         line-height: 2em;
  97.         padding: 0 20px;
  98.         margin: 0;
  99.         display: inline-block;
  100.         font-size: 14px;
  101.         width: 100%;
  102.     }
  103.  
  104.     .bbp-view.bbpress.archive #top-menu li > ul > li a {
  105.         transition: color 300ms ease 0ms;
  106.         font-weight: 500;
  107.         font-size: 13px;
  108.         letter-spacing: 0.2px;
  109.         padding: 6px 20px;
  110.         width: 200px;
  111.     }
  112.  
  113.     .bbp-view.bbpress.archive .youzify.youzify-page.youzify-forum.youzify-wild-content {
  114.         padding-top: 102px;
  115.     }
  116.  
  117.     .bbp-view.bbpress.archive #et_mobile_nav_menu {
  118.         display: none;
  119.     }
  120. }
  121.  
  122.  
  123.  
  124. @media (max-width: 980px) {
  125.     .bbp-view.bbpress.archive #page-container {
  126.         padding-top: 0;
  127.     }
  128.  
  129.     .bbp-view.bbpress.archive .youzify.youzify-page.youzify-forum.youzify-wild-content {
  130.         padding-top: 67px;
  131.     }
  132.  
  133.     .bbp-view.bbpress.archive .logo_container {
  134.         width: 15%;
  135.         display: flex;
  136.         flex: 0 1 auto;
  137.         align-items: center;
  138.     }
  139.  
  140.     .bbp-view.bbpress.archive .logo_container img {
  141.         height: auto;
  142.         max-height: none;
  143.         width: 120px;
  144.         display: block;
  145.     }
  146.  
  147.     .bbp-view.bbpress.archive #main-header .et_menu_container {
  148.         align-items: center;
  149.     }
  150.  
  151.     .bbp-view.bbpress.archive #et-top-navigation {
  152.         display: flex;
  153.         justify-content: flex-end;
  154.         flex: 1 1 auto;
  155.         align-items: stretch;
  156.         flex-wrap: wrap;
  157.         oapcity: 1;
  158.         padding-left: 0 !important;
  159.     }
  160.  
  161.     .bbp-view.bbpress.archive #et-top-navigation nav#top-menu-nav {
  162.         display: none;
  163.     }
  164.  
  165.     .bbp-view.bbpress.archive #et_mobile_nav_menu {
  166.         float: none;
  167.         margin: 0 6px;
  168.         display: flex;
  169.         align-items: center;
  170.     }
  171.  
  172.     .bbp-view.bbpress.archive .mobile_menu_bar {
  173.         position: relative;
  174.         display: block;
  175.         line-height: 0;
  176.     }
  177.  
  178.     .bbp-view.bbpress.archive .mobile_menu_bar::before {
  179.         content: "☰";
  180.         font-size: 32px;
  181.         position: relative;
  182.         left: 0;
  183.         top: 0;
  184.         cursor: pointer;
  185.         top: 2px;
  186.         color: #E09900;
  187.     }
  188.  
  189.     .bbp-view.bbpress.archive .et_mobile_menu {
  190.         background-color: #ffffff;
  191.         top: 100%;
  192.         padding: 5%;
  193.         position: absolute;
  194.         left: 0;
  195.         padding: 5%;
  196.         background: #fff;
  197.         width: 100%;
  198.         visibility: visible;
  199.         opacity: 1;
  200.         display: none;
  201.         z-index: 9999;
  202.         border-top: 3px solid #2ea3f2;
  203.         box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
  204.         -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
  205.         -webkit-box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
  206.     }
  207.  
  208.     .bbp-view.bbpress.archive .et_mobile_menu li a {
  209.         border-bottom: 1px solid rgba(0, 0, 0, .03);
  210.         color: #666;
  211.         padding: 10px 5%;
  212.         display: block;
  213.         font-weight: 500;
  214.         letter-spacing: 0.2px;
  215.         transition: color 300ms ease 0ms;
  216.         font-size: 16px;
  217.         line-height: 26px;
  218.     }
  219.  
  220.     .bbp-view.bbpress.archive .et_pb_menu .et_mobile_menu li ul {
  221.         visibility: visible;
  222.         display: block;
  223.         padding-left: 10px;
  224.     }
  225.  
  226.     .bbp-view.bbpress.archive .et_mobile_menu li li {
  227.         padding-left: 5%;
  228.     }
  229.  
  230.     .et_mobile_menu .menu-item-has-children > a {
  231.         font-weight: 700;
  232.         background-color: rgba(0, 0, 0, .03);
  233.     }
  234. }
Advertisement
Add Comment
Please, Sign In to add comment