Skip to content

MSF / msf-climate-hub

Go to a project
Toggle navigation
Toggle navigation pinning
fc66b1d8 by Jeff Balicki
Options

header 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent a758dbc1
Inline Side-by-side
Showing 13 changed files with 462 additions and 32 deletions
...@@ -14987,18 +14987,20 @@ figure.woocommerce-product-gallery__wrapper { ...@@ -14987,18 +14987,20 @@ figure.woocommerce-product-gallery__wrapper {
14987 width: 100%; 14987 width: 100%;
14988 background: white; 14988 background: white;
14989 z-index: 9000; 14989 z-index: 9000;
14990 height: 158px; 14990 height: 168px;
14991 } 14991 }
14992 #wrapper-navbar #navbarNavDropdown { 14992 #wrapper-navbar #navbarNavDropdown {
14993 width: 100%; 14993 width: 100%;
14994 display: flex !important;
14995 align-content: center;
14996 flex-wrap: wrap;
14994 } 14997 }
14995 #wrapper-navbar #main-menu { 14998 #wrapper-navbar #main-menu {
14996 width: 100%; 14999 width: 100%;
14997 justify-content: space-evenly; 15000 justify-content: space-between;
14998 } 15001 }
14999 #wrapper-navbar #main-menu > li:nth-child(n+2) .dropdown-menu { 15002 #wrapper-navbar #main-menu > li:nth-child(n+2) .dropdown-menu {
15000 flex-flow: column wrap-reverse; 15003 flex-flow: column wrap-reverse;
15001 margin-right: -5px;
15002 } 15004 }
15003 #wrapper-navbar #main-menu > li:nth-child(n+2) .dropdown-shadow { 15005 #wrapper-navbar #main-menu > li:nth-child(n+2) .dropdown-shadow {
15004 padding: 0 5px !important; 15006 padding: 0 5px !important;
...@@ -15012,7 +15014,7 @@ figure.woocommerce-product-gallery__wrapper { ...@@ -15012,7 +15014,7 @@ figure.woocommerce-product-gallery__wrapper {
15012 margin-left: 0.255em; 15014 margin-left: 0.255em;
15013 vertical-align: 0.255em; 15015 vertical-align: 0.255em;
15014 content: ""; 15016 content: "";
15015 border-top: 0.6em solid white; 15017 border-top: 0.6em solid transparent;
15016 border-right: 0.6em solid transparent; 15018 border-right: 0.6em solid transparent;
15017 border-bottom: 0; 15019 border-bottom: 0;
15018 border-left: 0.6em solid transparent; 15020 border-left: 0.6em solid transparent;
...@@ -15031,7 +15033,7 @@ figure.woocommerce-product-gallery__wrapper { ...@@ -15031,7 +15033,7 @@ figure.woocommerce-product-gallery__wrapper {
15031 #wrapper-navbar #main-nav { 15033 #wrapper-navbar #main-nav {
15032 position: fixed; 15034 position: fixed;
15033 width: 100%; 15035 width: 100%;
15034 height: 158px; 15036 height: 168px;
15035 padding: 0; 15037 padding: 0;
15036 box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137); 15038 box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137);
15037 z-index: 991 !important; 15039 z-index: 991 !important;
...@@ -15046,10 +15048,45 @@ figure.woocommerce-product-gallery__wrapper { ...@@ -15046,10 +15048,45 @@ figure.woocommerce-product-gallery__wrapper {
15046 padding-right: 1rem; 15048 padding-right: 1rem;
15047 padding-left: 1rem; 15049 padding-left: 1rem;
15048 } 15050 }
15049 #wrapper-navbar #main-menu li { 15051 #wrapper-navbar #main-menu .menu-item-has-children {
15050 display: flex; 15052 display: flex;
15051 align-items: center; 15053 align-items: center;
15052 flex-direction: column; 15054 flex-direction: column;
15055 width: 23%;
15056 height: 50px;
15057 }
15058 #wrapper-navbar #main-menu .menu-item-has-children a.dropdown-toggle {
15059 color: #fff;
15060 padding-top: 0.55rem;
15061 padding-right: 3rem;
15062 padding-left: 3rem;
15063 width: 100%;
15064 background-color: #EE0000;
15065 border-radius: 20px;
15066 text-align: center;
15067 height: 40px;
15068 margin-top: 0px;
15069 position: relative;
15070 }
15071 #wrapper-navbar #main-menu .menu-item-has-children a.dropdown-toggle .title-before-short {
15072 position: relative;
15073 }
15074 #wrapper-navbar #main-menu .menu-item-has-children a.dropdown-toggle .title-before-short:before {
15075 content: "";
15076 width: 12.74px;
15077 height: 7.73px;
15078 position: absolute;
15079 background-size: contain;
15080 top: 5px;
15081 left: -20px;
15082 background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12.742" height="7.726" viewBox="0 0 12.742 7.726"><path id="Path_1491" data-name="Path 1491" d="M6.383,4.709c.442-.447.875-.89,1.313-1.328Q9.274,1.8,10.855.231a.708.708,0,0,1,1.047,0c.2.206.405.407.608.61a.694.694,0,0,1,0,1.038L9.667,4.721,6.913,7.48a.768.768,0,0,1-.515.246.734.734,0,0,1-.567-.245Q4.769,6.415,3.706,5.349L.812,2.454c-.2-.2-.395-.393-.591-.591A.69.69,0,0,1,.228.844l.6-.6a.708.708,0,0,1,1.062,0L4.456,2.792,6.311,4.64Z" transform="translate(0 0)" fill="%23fff"/></svg>');
15083 }
15084 #wrapper-navbar #main-menu .menu-item-has-children a.dropdown-toggle.show {
15085 background-color: #669999;
15086 border-radius: 20px 20px 0px 0px;
15087 height: 60px;
15088 margin-top: 0px;
15089 margin-bottom: -20px;
15053 } 15090 }
15054 #wrapper-navbar #main-menu > li { 15091 #wrapper-navbar #main-menu > li {
15055 justify-content: flex-end; 15092 justify-content: flex-end;
...@@ -15062,7 +15099,7 @@ figure.woocommerce-product-gallery__wrapper { ...@@ -15062,7 +15099,7 @@ figure.woocommerce-product-gallery__wrapper {
15062 } 15099 }
15063 #wrapper-navbar .title-before-short { 15100 #wrapper-navbar .title-before-short {
15064 margin: 0; 15101 margin: 0;
15065 color: black; 15102 color: #fff;
15066 text-decoration: none; 15103 text-decoration: none;
15067 white-space: break-spaces; 15104 white-space: break-spaces;
15068 } 15105 }
...@@ -15125,7 +15162,7 @@ figure.woocommerce-product-gallery__wrapper { ...@@ -15125,7 +15162,7 @@ figure.woocommerce-product-gallery__wrapper {
15125 border: 0; 15162 border: 0;
15126 margin: 0; 15163 margin: 0;
15127 padding-bottom: 1rem; 15164 padding-bottom: 1rem;
15128 background: none; 15165 background: 0 0;
15129 border-radius: 0; 15166 border-radius: 0;
15130 height: 15.25rem; 15167 height: 15.25rem;
15131 max-height: 15.25rem; 15168 max-height: 15.25rem;
...@@ -15134,6 +15171,7 @@ figure.woocommerce-product-gallery__wrapper { ...@@ -15134,6 +15171,7 @@ figure.woocommerce-product-gallery__wrapper {
15134 flex-wrap: wrap; 15171 flex-wrap: wrap;
15135 left: auto; 15172 left: auto;
15136 right: 0; 15173 right: 0;
15174 margin-top: 11px;
15137 } 15175 }
15138 #wrapper-navbar #main-menu .dropdown-menu:before { 15176 #wrapper-navbar #main-menu .dropdown-menu:before {
15139 content: ""; 15177 content: "";
...@@ -15143,12 +15181,19 @@ figure.woocommerce-product-gallery__wrapper { ...@@ -15143,12 +15181,19 @@ figure.woocommerce-product-gallery__wrapper {
15143 top: -10px; 15181 top: -10px;
15144 padding-left: 150%; 15182 padding-left: 150%;
15145 } 15183 }
15184 #wrapper-navbar #main-menu .dropdown-menu li {
15185 display: flex;
15186 align-items: center;
15187 flex-direction: column;
15188 }
15146 #wrapper-navbar #main-menu .dropdown-menu > li { 15189 #wrapper-navbar #main-menu .dropdown-menu > li {
15147 flex: 0; 15190 flex: 0;
15148 background: #e5e5e5; 15191 background: #e5e5e5;
15149 width: 16.25rem; 15192 width: 16.25rem;
15150 min-width: 16.25rem; 15193 min-width: 16.25rem;
15151 max-width: 16.25rem; 15194 max-width: 16.25rem;
15195 margin-top: 7px;
15196 justify-content: flex-end;
15152 } 15197 }
15153 #wrapper-navbar #main-menu .dropdown-menu > li a { 15198 #wrapper-navbar #main-menu .dropdown-menu > li a {
15154 font-family: "PT Sans", sans-serif; 15199 font-family: "PT Sans", sans-serif;
...@@ -15172,6 +15217,17 @@ figure.woocommerce-product-gallery__wrapper { ...@@ -15172,6 +15217,17 @@ figure.woocommerce-product-gallery__wrapper {
15172 letter-spacing: 0px; 15217 letter-spacing: 0px;
15173 color: #000000; 15218 color: #000000;
15174 text-transform: uppercase; 15219 text-transform: uppercase;
15220 display: flex;
15221 align-content: flex-end;
15222 flex-wrap: wrap;
15223 border-left: 1px solid #999;
15224 padding-left: 27px;
15225 margin-left: 37px;
15226 }
15227
15228 .branding {
15229 display: flex;
15230 margin-bottom: 10px;
15175 } 15231 }
15176 15232
15177 .has-blue-color, 15233 .has-blue-color,
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
...@@ -8,6 +8,9 @@ ...@@ -8,6 +8,9 @@
8 // Exit if accessed directly. 8 // Exit if accessed directly.
9 defined( 'ABSPATH' ) || exit; 9 defined( 'ABSPATH' ) || exit;
10 10
11 @ini_set( 'upload_max_size' , '100M' );
12
13
11 require_once __DIR__.'/vendor/autoload.php'; 14 require_once __DIR__.'/vendor/autoload.php';
12 require_once __DIR__.'/inc/inc.php'; 15 require_once __DIR__.'/inc/inc.php';
13 16
......
...@@ -24,7 +24,7 @@ $container = get_theme_mod( 'understrap_container_type' ); ...@@ -24,7 +24,7 @@ $container = get_theme_mod( 'understrap_container_type' );
24 <!-- Your site branding in the menu --> 24 <!-- Your site branding in the menu -->
25 <div class="branding"> 25 <div class="branding">
26 <?php get_template_part( 'global-templates/navbar-branding' ); ?> 26 <?php get_template_part( 'global-templates/navbar-branding' ); ?>
27 <span class="site-title">MSF CLIMATE HUB</span> 27 <div class="site-title">MSF CLIMATE HUB</div>
28 </div> 28 </div>
29 <button 29 <button
30 class="navbar-toggler" 30 class="navbar-toggler"
......
...@@ -6743,6 +6743,163 @@ ...@@ -6743,6 +6743,163 @@
6743 } 6743 }
6744 })(); 6744 })();
6745 6745
6746 // Add your custom JS here.
6747
6748 //In order to do that we have to flex:1 each item.. see flexMatrix
6749 function correctDropdownMenuItemGaps() {
6750 var drop_index = 0;
6751 jQuery('#main-menu > li').each(function () {
6752 var dropdown = jQuery(this).find('.dropdown-menu');
6753 consecutive_normals = 0;
6754 if (dropdown.length > 0) {
6755 var items = jQuery(dropdown).find('li'),
6756 idx = 0,
6757 total_width = 0;
6758 items.each(function (item) {
6759 ++idx;
6760 if (flexMatrix(items, idx)) {
6761 items.eq(idx - 1).css('flex', 1);
6762 total_width += items.eq(idx - 1).width();
6763 // if(drop_idx == 2) {
6764 // console.log(total_width)
6765 // }
6766 }
6767 });
6768
6769 if (drop_index >= 3) {
6770 jQuery(this).find('.dropdown-shadow').css('width', total_width);
6771 } else {
6772 jQuery(this).find('.dropdown-shadow').css('width', total_width);
6773 }
6774 }
6775 ++drop_index;
6776 });
6777 }
6778 var consecutive_normals = 0;
6779
6780 //Returns true if this menu item should flex:1, it's true if an image is the next item and this item is not a 3rd.. etc.
6781 function flexMatrix(items, current_idx) {
6782 var last_item = items.eq(current_idx - 2);
6783 var next_item = items.eq(current_idx);
6784 var item = items.eq(current_idx - 1);
6785
6786 //if the last item was an image we started a new col so do not break here unless its the last one
6787 if (last_item) {
6788 if (jQuery(last_item).find('img').length > 0 && !next_item) {
6789 return false;
6790 }
6791 }
6792
6793 //if the next item is an image item or this is the last one
6794 if (next_item) {
6795 if (jQuery(next_item).find('img').length > 0) {
6796 consecutive_normals = 0;
6797 return true;
6798 }
6799 }
6800 //last item flex it
6801 if (items.length === current_idx) {
6802 return true;
6803 }
6804 if (jQuery(item).hasClass('break-here')) {
6805 consecutive_normals = 0;
6806 return true;
6807 }
6808
6809 //If this is an image item flex
6810 if (jQuery(item).find('img').length > 0) {
6811 consecutive_normals = 0;
6812 return true;
6813 }
6814 ++consecutive_normals;
6815 //If this is a 3rd consecutive normal item
6816 if (consecutive_normals == 3) {
6817 consecutive_normals = 0;
6818 return true;
6819 }
6820 }
6821
6822 //This adjusts the menu dropdown location to never go past the inner edge of the Donate Now button
6823 //and line up with it if so
6824 function lineUpThePositionsOfTheDropdowns() {
6825 var menu_item_widths = [];
6826 jQuery('#main-menu > li').each(function () {
6827 menu_item_widths.push(jQuery(this).outerWidth());
6828 });
6829
6830 //Remove the donate button
6831 menu_item_widths.pop();
6832 var idx = 0;
6833 jQuery('#main-menu > li').each(function () {
6834 if (jQuery(this).find('.dropdown-menu').length > 0) {
6835 if (idx == 0) {
6836 jQuery(this).find('.dropdown-menu').css('left', -100);
6837 } else {
6838 jQuery(this).find('.dropdown-menu').css('right', -100);
6839 }
6840 }
6841 ++idx;
6842 });
6843 }
6844 var HeaderMenu = function () {
6845 return {
6846 alignTheSideCaptions: function () {
6847 jQuery('.side-caption').each(function () {
6848 var that = this;
6849 var _bottom = jQuery(this).find('.image-side-caption').innerHeight();
6850 if (!Responsive.isDesktop()) {
6851 if (jQuery(that).parent().is('.entry-header') && !jQuery(that).parent().is('.no-photo')) {
6852 jQuery(that).css('margin-bottom', -_bottom);
6853 var _bottom = jQuery(that).parent().find('.title-container').innerHeight();
6854 jQuery(that).css('bottom', _bottom);
6855 setTimeout(function () {
6856 jQuery(that).addClass('ready');
6857 }, 500);
6858 } else {
6859 jQuery(that).css('bottom', -_bottom);
6860 setTimeout(function () {
6861 jQuery(that).addClass('ready');
6862 }, 500);
6863 }
6864 } else {
6865 jQuery(this).css('bottom', -_bottom);
6866 setTimeout(function () {
6867 jQuery(that).addClass('ready');
6868 }, 500);
6869 }
6870 });
6871 }
6872 };
6873 }();
6874 jQuery(function ($) {
6875 correctDropdownMenuItemGaps();
6876 lineUpThePositionsOfTheDropdowns();
6877 setInterval(function () {
6878 HeaderMenu.alignTheSideCaptions();
6879 }, 1000);
6880 $('.copy-link').on('click', function (e) {
6881 e.preventDefault();
6882 });
6883 var body = document.getElementsByTagName("BODY")[0];
6884 body.offsetWidth;
6885 if (window.addEventListener) {
6886 // all browsers except IE before version 9
6887 window.addEventListener("resize", onResizeEvent, true);
6888 } else {
6889 if (window.attachEvent) {
6890 // IE before version 9
6891 window.attachEvent("onresize", onResizeEvent);
6892 }
6893 }
6894 function onResizeEvent() {
6895 // bodyElement = document.getElementsByTagName("BODY")[0];
6896 // newWidth = bodyElement.offsetWidth;
6897 // if(newWidth != width){
6898 // width = newWidth;
6899 // }
6900 }
6901 });
6902
6746 exports.Alert = alert; 6903 exports.Alert = alert;
6747 exports.Button = button; 6904 exports.Button = button;
6748 exports.Carousel = carousel; 6905 exports.Carousel = carousel;
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
1 // Add your custom JS here.
...\ No newline at end of file ...\ No newline at end of file
1 // Add your custom JS here.
2
3
4
5 //In order to do that we have to flex:1 each item.. see flexMatrix
6 function correctDropdownMenuItemGaps() {
7 var drop_index = 0;
8 jQuery('#main-menu > li').each(function () {
9 var dropdown = jQuery(this).find('.dropdown-menu');
10 consecutive_normals = 0;
11 if (dropdown.length > 0) {
12 var items = jQuery(dropdown).find('li'),
13 idx = 0,
14 total_width = 0;
15 items.each(function (item) {
16 ++idx;
17 if (flexMatrix(items, idx)) {
18 items.eq(idx - 1).css('flex', 1);
19 total_width += items.eq(idx - 1).width();
20 // if(drop_idx == 2) {
21 // console.log(total_width)
22 // }
23 }
24 });
25 if (drop_index >= 3) {
26 jQuery(this).find('.dropdown-shadow').css('width', total_width);
27 } else {
28 jQuery(this).find('.dropdown-shadow').css('width', total_width);
29 }
30 }
31 ++drop_index;
32 });
33 }
34 var consecutive_normals = 0;
35
36 //Returns true if this menu item should flex:1, it's true if an image is the next item and this item is not a 3rd.. etc.
37 function flexMatrix(items, current_idx) {
38 var last_item = items.eq(current_idx - 2);
39 var next_item = items.eq(current_idx);
40 var item = items.eq(current_idx - 1);
41
42 //if the last item was an image we started a new col so do not break here unless its the last one
43 if (last_item) {
44 if (jQuery(last_item).find('img').length > 0 && !next_item) {
45 return false;
46 }
47 }
48
49 //if the next item is an image item or this is the last one
50 if (next_item) {
51 if (jQuery(next_item).find('img').length > 0) {
52 consecutive_normals = 0;
53 return true;
54 }
55 }
56 //last item flex it
57 if (items.length === current_idx) {
58 return true;
59 }
60 if (jQuery(item).hasClass('break-here')) {
61 consecutive_normals = 0;
62 return true;
63 }
64
65 //If this is an image item flex
66 if (jQuery(item).find('img').length > 0) {
67 consecutive_normals = 0;
68 return true;
69 }
70 ++consecutive_normals;
71 //If this is a 3rd consecutive normal item
72 if (consecutive_normals == 3) {
73 consecutive_normals = 0;
74 return true;
75 }
76 }
77
78 //This adjusts the menu dropdown location to never go past the inner edge of the Donate Now button
79 //and line up with it if so
80 function lineUpThePositionsOfTheDropdowns() {
81 var menu_item_widths = [];
82 jQuery('#main-menu > li').each(function () {
83 menu_item_widths.push(jQuery(this).outerWidth());
84 });
85
86 //Remove the donate button
87 menu_item_widths.pop();
88 var idx = 0;
89 jQuery('#main-menu > li').each(function () {
90 if (jQuery(this).find('.dropdown-menu').length > 0) {
91 if (idx == 0) {
92 jQuery(this).find('.dropdown-menu').css('left', -100);
93 } else {
94 jQuery(this).find('.dropdown-menu').css('right', -100);
95 }
96 }
97 ++idx;
98 });
99 }
100 var HeaderMenu = function () {
101 return {
102 alignTheSideCaptions: function () {
103 jQuery('.side-caption').each(function () {
104 var that = this;
105 var _bottom = jQuery(this).find('.image-side-caption').innerHeight();
106 if (!Responsive.isDesktop()) {
107 if (jQuery(that).parent().is('.entry-header') && !jQuery(that).parent().is('.no-photo')) {
108 jQuery(that).css('margin-bottom', -_bottom);
109 var _bottom = jQuery(that).parent().find('.title-container').innerHeight();
110 jQuery(that).css('bottom', _bottom);
111 setTimeout(function () {
112 jQuery(that).addClass('ready');
113 }, 500);
114 } else {
115 jQuery(that).css('bottom', -_bottom);
116 setTimeout(function () {
117 jQuery(that).addClass('ready');
118 }, 500);
119 }
120 } else {
121 jQuery(this).css('bottom', -_bottom);
122 setTimeout(function () {
123 jQuery(that).addClass('ready');
124 }, 500);
125 }
126 });
127 }
128 };
129 }();
130 jQuery(function ($) {
131 correctDropdownMenuItemGaps();
132 lineUpThePositionsOfTheDropdowns();
133 setInterval(function () {
134 HeaderMenu.alignTheSideCaptions();
135 }, 1000);
136 $('.copy-link').on('click', function (e) {
137 e.preventDefault();
138 });
139 var body = document.getElementsByTagName("BODY")[0];
140 body.offsetWidth;
141 if (window.addEventListener) {
142 // all browsers except IE before version 9
143 window.addEventListener("resize", onResizeEvent, true);
144 } else {
145 if (window.attachEvent) {
146 // IE before version 9
147 window.attachEvent("onresize", onResizeEvent);
148 }
149 }
150 function onResizeEvent() {
151 // bodyElement = document.getElementsByTagName("BODY")[0];
152 // newWidth = bodyElement.offsetWidth;
153 // if(newWidth != width){
154 // width = newWidth;
155 // }
156 }
157 });
158
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -5,4 +5,16 @@ ...@@ -5,4 +5,16 @@
5 letter-spacing: 0px; 5 letter-spacing: 0px;
6 color: #000000; 6 color: #000000;
7 text-transform: uppercase; 7 text-transform: uppercase;
8 }
...\ No newline at end of file ...\ No newline at end of file
8 display: flex;
9 align-content: flex-end;
10 flex-wrap: wrap;
11 border-left: 1px solid #999;
12 padding-left: 27px;
13 margin-left: 37px;
14
15 }
16
17 .branding{
18 display: flex;
19 margin-bottom: 10px;
20 }
......
...@@ -4,17 +4,19 @@ ...@@ -4,17 +4,19 @@
4 width: 100%; 4 width: 100%;
5 background:white; 5 background:white;
6 z-index: 9000; 6 z-index: 9000;
7 height: 158px; 7 height: 168px;
8 #navbarNavDropdown{ 8 #navbarNavDropdown{
9 width: 100%; 9 width: 100%;
10 display: flex !important;
11 align-content: center;
12 flex-wrap: wrap;
10 } 13 }
11 #main-menu { 14 #main-menu {
12 width: 100%; 15 width: 100%;
13 justify-content: space-evenly; 16 justify-content: space-between;
14 & > li:nth-child(n+2) { 17 & > li:nth-child(n+2) {
15 .dropdown-menu { 18 .dropdown-menu {
16 flex-flow: column wrap-reverse; 19 flex-flow: column wrap-reverse;
17 margin-right: -5px;
18 } 20 }
19 .dropdown-shadow { 21 .dropdown-shadow {
20 padding:0 5px !important; 22 padding:0 5px !important;
...@@ -30,7 +32,7 @@ ...@@ -30,7 +32,7 @@
30 margin-left: 0.255em; 32 margin-left: 0.255em;
31 vertical-align: 0.255em; 33 vertical-align: 0.255em;
32 content: ""; 34 content: "";
33 border-top: 0.6em solid white; 35 border-top: 0.6em solid transparent;
34 border-right: 0.6em solid transparent; 36 border-right: 0.6em solid transparent;
35 border-bottom: 0; 37 border-bottom: 0;
36 border-left: 0.6em solid transparent; 38 border-left: 0.6em solid transparent;
...@@ -51,7 +53,7 @@ ...@@ -51,7 +53,7 @@
51 #main-nav { 53 #main-nav {
52 position: fixed; 54 position: fixed;
53 width: 100%; 55 width: 100%;
54 height: 158px; 56 height: 168px;
55 padding:0; 57 padding:0;
56 box-shadow: 0px 3px 6px #00000029; 58 box-shadow: 0px 3px 6px #00000029;
57 z-index: 991 !important; 59 z-index: 991 !important;
...@@ -67,10 +69,49 @@ ...@@ -67,10 +69,49 @@
67 padding-right: 1rem; 69 padding-right: 1rem;
68 padding-left: 1rem; 70 padding-left: 1rem;
69 } 71 }
72 .menu-item-has-children{
73 display: flex;
74 align-items: center;
75 flex-direction: column;
76 width: 23%;
77 height: 50px;
78 a.dropdown-toggle {
79 color:#fff;
80 padding-top:.55rem;
81 padding-right: 3rem;
82 padding-left: 3rem;
83 width: 100%;
84 background-color: #EE0000;
85 border-radius: 20px;
86 text-align: center;
87 height: 40px;
88 margin-top: 0px;
89 position: relative;
90 .title-before-short{
91 position: relative;
92 }
93 .title-before-short:before{
94 content: "";
95 width: 12.74px;
96 height: 7.73px;
97 position: absolute;
98 background-size: contain;
99 top: 5px;
100 left: -20px;
101 background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12.742" height="7.726" viewBox="0 0 12.742 7.726"><path id="Path_1491" data-name="Path 1491" d="M6.383,4.709c.442-.447.875-.89,1.313-1.328Q9.274,1.8,10.855.231a.708.708,0,0,1,1.047,0c.2.206.405.407.608.61a.694.694,0,0,1,0,1.038L9.667,4.721,6.913,7.48a.768.768,0,0,1-.515.246.734.734,0,0,1-.567-.245Q4.769,6.415,3.706,5.349L.812,2.454c-.2-.2-.395-.393-.591-.591A.69.69,0,0,1,.228.844l.6-.6a.708.708,0,0,1,1.062,0L4.456,2.792,6.311,4.64Z" transform="translate(0 0)" fill="%23fff"/></svg>');
102 }
103
104 }
105 a.dropdown-toggle.show{
106 background-color: #669999;
107 border-radius: 20px 20px 0px 0px;
108 height: 60px;
109 margin-top: 0px;
110 margin-bottom: -20px;
111 }
112 }
70 li { 113 li {
71 display: flex; 114
72 align-items: center;
73 flex-direction: column;
74 } 115 }
75 & > li { 116 & > li {
76 justify-content: flex-end; 117 justify-content: flex-end;
...@@ -87,7 +128,7 @@ ...@@ -87,7 +128,7 @@
87 } 128 }
88 .title-before-short { 129 .title-before-short {
89 margin:0; 130 margin:0;
90 color:#000f; 131 color:#fff;
91 text-decoration: none; 132 text-decoration: none;
92 white-space: break-spaces; 133 white-space: break-spaces;
93 } 134 }
...@@ -146,23 +187,20 @@ ...@@ -146,23 +187,20 @@
146 box-sizing: content-box; 187 box-sizing: content-box;
147 } 188 }
148 #main-menu .dropdown-menu { 189 #main-menu .dropdown-menu {
149 padding:0; 190 padding: 0;
150 border:0; 191 border: 0;
151 margin:0; 192 margin: 0;
152 padding-bottom:1rem; 193 padding-bottom: 1rem;
153 background:none; 194 background: 0 0;
154 // padding-top:6px;
155 // margin-top:-6px;
156 // padding-top:5px;
157 // background:none;
158 border-radius: 0; 195 border-radius: 0;
159 height:15.25rem; 196 height: 15.25rem;
160 max-height: 15.25rem; 197 max-height: 15.25rem;
161 min-height: 15.25rem; 198 min-height: 15.25rem;
162 flex-direction: column; 199 flex-direction: column;
163 flex-wrap: wrap; 200 flex-wrap: wrap;
164 left:auto; 201 left: auto;
165 right:0; 202 right: 0;
203 margin-top: 11px;
166 &:before { 204 &:before {
167 content: ""; 205 content: "";
168 width: 100%; 206 width: 100%;
...@@ -171,12 +209,19 @@ ...@@ -171,12 +209,19 @@
171 top: -10px; 209 top: -10px;
172 padding-left: 150%; 210 padding-left: 150%;
173 } 211 }
212 li{
213 display: flex;
214 align-items: center;
215 flex-direction: column;
216 }
174 & > li { 217 & > li {
175 flex:0; 218 flex:0;
176 background: #e5e5e5; 219 background: #e5e5e5;
177 width:16.25rem; 220 width:16.25rem;
178 min-width:16.25rem; 221 min-width:16.25rem;
179 max-width: 16.25rem; 222 max-width: 16.25rem;
223 margin-top: 7px;
224 justify-content: flex-end;
180 a { 225 a {
181 font-family: "PT Sans",sans-serif; 226 font-family: "PT Sans",sans-serif;
182 } 227 }
......