Guest User

Untitled

a guest
Oct 1st, 2019
407
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.70 KB | None | 0 0
  1.  
  2.  
  3. /************************************
  4.  
  5. Widget left, Logo center, widget right, menu above
  6.  
  7. *************************************
  8.  
  9.  
  10. CSS Settings:
  11.  
  12. » Initiate Flexbox
  13. » Topbar
  14. » Header
  15. » Logo
  16. » Menu
  17. » Widget
  18. » Social icons
  19. » Search
  20. » Cart icon
  21.  
  22. ***********************************/
  23.  
  24.  
  25. /*--------------------------------
  26.  
  27. » Initiate Flexbox
  28.  
  29. --------------------------------*/
  30.  
  31.  
  32. /* Header */
  33. .responsive #top #header,
  34. /* Top bar */
  35. .responsive #top #header #header_meta,
  36. /* Search icon */
  37. .responsive #top #header #menu-item-search a,
  38. /* Cart icon */
  39. .responsive #top #header a.cart_dropdown_link,
  40. /* Social icon */
  41. .responsive #top #header #header_main nav .social_bookmarks,
  42. /* Logo */
  43. .responsive #top #header #header_main .inner-container .logo,
  44. /* Main menu, cart and social icons */
  45. .responsive #top #header #header_main .inner-container .main_menu,
  46. /* Widgets */
  47. .responsive #top #header #header_main .inner-container .widget:nth-child(3),
  48. .responsive #top #header #header_main .inner-container .widget:nth-child(4),
  49. /* Header inner container */
  50. #top #header #header_main .container.av-logo-container .inner-container {
  51. display: flex;
  52. position: relative;
  53. }
  54.  
  55.  
  56.  
  57.  
  58.  
  59. /*--------------------------------
  60.  
  61. » Topbar
  62.  
  63. --------------------------------*/
  64.  
  65.  
  66. /* Top bar */
  67.  
  68. .responsive #top #header #header_meta {
  69. flex-basis: 100%;
  70. }
  71.  
  72.  
  73.  
  74.  
  75. /*--------------------------------
  76.  
  77. » Header
  78.  
  79. --------------------------------*/
  80.  
  81.  
  82. /* Height outer container */
  83.  
  84. #top #header #header_main .container.av-logo-container {
  85. /* Do not change height here */
  86. /* Auto height: Header takes the height of the contents */
  87. height: inherit;
  88. line-height: inherit;
  89. }
  90.  
  91.  
  92.  
  93. /* Header inner container */
  94.  
  95. #top #header #header_main .container.av-logo-container .inner-container {
  96. /* Define header height here */
  97. height: inherit;
  98. position: relative !important;
  99. flex-wrap: wrap;
  100. /* Define header padding */
  101. padding: 10px;
  102. justify-content: space-between;
  103. }
  104.  
  105.  
  106.  
  107. /* Wrappers
  108. --------------------------------*/
  109.  
  110.  
  111. /* Main header ( logo, menu, widgets ) and topbar */
  112.  
  113. .responsive #top #header {
  114. flex-wrap: wrap;
  115. }
  116.  
  117.  
  118. /* Logo, Menu, Social Icons and Widgets. */
  119.  
  120. .responsive #top #header #header_main {
  121. flex-basis: 100%;
  122. }
  123.  
  124.  
  125. /* Transparent header
  126. --------------------------------*/
  127.  
  128. .responsive.html_header_transparency #top #wrap_all #header {
  129. position: absolute;
  130. }
  131.  
  132. @media only screen and (max-width: 767px) {
  133. .responsive.html_header_transparency #top #wrap_all #main {
  134. /* Define padding value for transparent header in mobile */
  135. /*padding-top: 315px !important; */
  136. }
  137. }
  138.  
  139.  
  140.  
  141.  
  142.  
  143. /* Fixed header
  144. --------------------------------*/
  145.  
  146. .html_header_sticky.html_mobile_menu_tablet #top #wrap_all #header,
  147. .html_header_sticky.html_header_transparency #top #wrap_all #header,
  148. .html_header_sticky #top #wrap_all #header {
  149. position: fixed;
  150. }
  151.  
  152. .html_header_sticky #top #header_main .container,
  153. .html_header_sticky #top .main_menu ul:first-child>li a {
  154. height: inherit !important;
  155. line-height: inherit !important;
  156. }
  157.  
  158.  
  159. /* Main content padding value should be same as the fixed header height. */
  160.  
  161. .html_header_sticky:not(.html_header_transparency) #top #wrap_all #main,
  162. .html_header_sticky #top #wrap_all #main {
  163. /* Define padding only if sticky header is active */
  164. /*padding-top: 262px ; */
  165. }
  166.  
  167. @media only screen and (max-width: 767px) {
  168. .html_header_sticky #top #wrap_all #main {
  169. /* Define padding value for sticky header on mobile */
  170. /*padding-top: 315px !important; */
  171. }
  172. }
  173.  
  174.  
  175.  
  176.  
  177.  
  178.  
  179. /*--------------------------------
  180.  
  181. » Logo
  182.  
  183. --------------------------------*/
  184.  
  185.  
  186. /* Logo */
  187.  
  188. .responsive #top #header #header_main .inner-container .logo {
  189. order: 4;
  190. flex-basis: 32%;
  191. /*width: auto;*/
  192. /* Define scalable max width of the logo on big screens */
  193. /* Logo width: (auto | 100% | px ); Set auto to display the uploaded image size */
  194. max-width: 180px;
  195. /* Define scalable min width of the logo on small screens */
  196. min-width: 100px;
  197.  
  198. z-index: 9;
  199. }
  200.  
  201.  
  202. /* Logo image size */
  203.  
  204. .responsive #top #header .logo,
  205. .responsive #top #header .logo a,
  206. .responsive #top #header .logo img {
  207. width: auto;
  208.  
  209.  
  210. /* Height specification is not required. It is proportional to the max width of the logo */
  211. height: auto;
  212. align-items: center;
  213. align-self: center;
  214. justify-content: center;
  215. }
  216.  
  217.  
  218. /* Vertically center transparency logo */
  219.  
  220. .responsive #top #header .logo span img {
  221. position: absolute;
  222. top: 50%;
  223. transform: translateY(-50%);
  224. }
  225.  
  226.  
  227.  
  228. /*--------------------------------
  229.  
  230. » Menu
  231.  
  232. --------------------------------*/
  233.  
  234.  
  235. /* Menu outer container: Menu with siblings cart and social icons */
  236.  
  237. .responsive #top #header #header_main .inner-container .main_menu {
  238. order: 5;
  239.  
  240. /* Define menu width */
  241. flex-basis: 100%;
  242.  
  243. align-items: center;
  244. align-self: center;
  245. height: inherit !important;
  246. background: #f1f1f1;
  247. justify-content: center;
  248. margin-bottom: 20px;
  249. }
  250.  
  251.  
  252. /* Navigation */
  253.  
  254. #header .av-main-nav {
  255. display: flex;
  256. flex-wrap: nowrap;
  257. }
  258.  
  259.  
  260. /* Activate burger menu */
  261.  
  262. @media only screen and (max-width: 1100px) {
  263. #top #header .av-main-nav>li.menu-item {
  264. display: none!important;
  265. }
  266. #top #header .av-burger-menu-main {
  267. cursor: pointer;
  268. display: block!important;
  269. }
  270. }
  271.  
  272. @media only screen and (max-width: 767px) {
  273. /* Mobile menu position fix */
  274. .responsive #top .av-logo-container .avia-menu {
  275. display: flex!important;
  276. align-items: center;
  277. }
  278. }
  279.  
  280.  
  281.  
  282. /* Mega menu submenu position fix */
  283.  
  284. .responsive #top #header .avia_mega_div {
  285. /* Define megamenu submenu top value */
  286. /* top: 300px;
  287. position: fixed;
  288. left: 50%;
  289. transform: translateX(-50%);*/
  290. }
  291.  
  292.  
  293.  
  294. /*--------------------------------
  295.  
  296. » Widget
  297.  
  298. --------------------------------*/
  299.  
  300.  
  301. /* Widgets */
  302.  
  303. .responsive #top #header #header_main .inner-container .widget {
  304.  
  305. padding: 0;
  306. clear: none!important;
  307.  
  308. justify-content: center;
  309. align-self: center;
  310. align-items: center;
  311. z-index: 1;
  312. }
  313.  
  314.  
  315. .responsive #top #header #header_main .inner-container .widget>div {
  316. width: 100%;
  317. line-height: 14px;
  318. padding: 0 10px;
  319. background: gold;
  320. }
  321.  
  322. /* Widgets areas */
  323. .responsive #top #header #header_main .inner-container .widget:nth-child(3){
  324. order: 2;
  325. flex-basis: 33%;
  326. text-align: center;
  327. }
  328. .responsive #top #header #header_main .inner-container .widget:nth-child(4){
  329. order: 4;
  330. flex-basis: 33%;
  331. text-align: center;
  332. }
  333.  
  334. /*--------------------------------
  335.  
  336. » Social icons
  337.  
  338. --------------------------------*/
  339.  
  340.  
  341. /* Flex support and position fix */
  342.  
  343. .responsive #top #header #header_main nav .social_bookmarks {
  344. top: auto;
  345. margin-top: 0;
  346. align-items: center;
  347. }
  348.  
  349.  
  350. /* Inherit height for flex alignment */
  351.  
  352. .responsive #top .av-logo-container .social_bookmarks li {
  353. height: inherit;
  354. }
  355.  
  356.  
  357.  
  358.  
  359.  
  360. /*--------------------------------
  361.  
  362. » Search
  363.  
  364. --------------------------------*/
  365.  
  366.  
  367. /* Your styles here */
  368.  
  369.  
  370. /*--------------------------------
  371.  
  372. » Cart
  373.  
  374. --------------------------------*/
  375.  
  376.  
  377. /* Cart position fix */
  378.  
  379. #top #header #header_main #menu-item-shop a.cart_dropdown_link {
  380. height: auto;
  381. }
  382.  
  383. @media only screen and (max-width: 767px) {
  384. .responsive #top #menu-item-shop.cart_dropdown {
  385. display: flex;
  386. align-items: center;
  387. }
  388. .cart_dropdown .dropdown_widget .avia-arrow {
  389. display: none;
  390. }
  391. }
Advertisement
Add Comment
Please, Sign In to add comment