https://indiaagronet.com/innerjs/header.js

1document.getElementById("header").innerHTML = `
2<header class="main-header">
3
4
5
6  <!-- 🌑 TOP BLACK MENU (Main Navigation) -->
7  <div class="header-row2">
8    <ul class="main-nav-list">
9      <li><a href="/">HOME</a></li>
10      <li><a href="/Agriculture-News/">NEWS</a></li>
11      <li class="market-dropdown">
12        <a href="/Crop-Cultivation/">CROP &#9662;</a>
13        <div class="market-mega">
14          <a href="/Crop-Cultivation/">Crop cultivation</a>
15          <a href="/horticulture/">Horticulture</a>
16          <a href="/Soil-Management/">Soil management</a>
17          <a href="/Organic-Farming/">Organic farming</a>
18          <a href="/Vegetable-Farming/">Vegetable farming</a>
19          <a href="/Fruit-Farming/">Fruit farming</a>
20        </div>
21      </li>
22      <li><a href="/Agriculture-Finance/">FINANCE</a></li>
23      <li><a href="/Agriculture-Jobs/">JOBS</a></li>
24      <li><a href="/Agriculture-Events/">EVENTS</a></li>
25      <li><a href="/reports/">REPORTS</a></li>
26      <li><a href="/advertise-with-us/">ADVERTISE</a></li>
27      <li><a href="/media-services/">MEDIA SERVICES</a></li>
28      <li><a href="/advertise-with-us/">SPONSORSHIPS</a></li>
29      <li><a href="/About-Us.html">ABOUT US</a></li>
30      <li><a href="/contact-us/">CONTACT US</a></li>
31    </ul>
32  </div>
33
34  <!-- ⚪ LOGO SECTION -->
35  <div class="header-row1">
36    <div class="header-row1-actions row1-left">
37      <a class="header-quick-btn" href="/Agriculture-News/">News</a>
38      <a class="header-quick-btn" href="/agriculture-newsletter/">Subscribe</a>
39    </div>
40
41    <div class="logo">
42      <a href="/">
43        <img src="https://indiaagronet.com/image/indiaagronet_logo.png" alt="IndiaAgroNet">
44      </a>
45    </div>
46
47    <div class="header-row1-actions row1-right">
48      <a class="header-quick-btn" href="/Agriculture-Jobs/">Jobs</a>
49      <a class="header-quick-btn" href="/advertise-with-us/">Advertise</a>
50    </div>
51
52    <div class="menubar" id="mob-menu-btn" role="button" tabindex="0" aria-label="Open mobile menu">
53      <i class="bi bi-list"></i>
54    </div>
55  </div>
56
57  <!-- 🌿 GREEN CATEGORY MENU (IMPORTANT SEO PART) -->
58  <div class="header-row3">
59    <ul class="sub-nav-list">
60      <li><a href="/Agriculture-Products/">COMPARE</a></li>
61      <li><a href="/agri-buyers-guide/">BUYER'S GUIDE</a></li>
62      <li><a href="/Agriculture-Decisions/">AGRONET DECISIONS</a></li>
63      <li><a href="/community/">COMMUNITY</a></li>
64      <li><a href="/Agri-Recruiters/">AGRO STAFFING</a></li>
65      <li><a href="/Agriculture-Directory/">AGRO DIRECTORY</a></li>
66      <li><a href="/agriculture-interviews/">INTERVIEWS</a></li>
67      <li><a href="/agri-food-pr/">SUBMIT YOUR PR</a></li>
68      <li><a href="/feedback/">FEEDBACK</a></li>
69    </ul>
70  </div>
71
72  <!-- 🌾 DROPDOWN CONTENT MAPPING (Handled via mega menus above) -->
73
74</header>
75
76<!-- MOBILE MENU -->
77<div class="mob-drawer-backdrop" id="mob-backdrop"></div>
78<div class="mob-drawer" id="mob-drawer">
79  <div class="mob-drawer-header">
80    <span>Menu</span>
81    <button id="mob-close-btn" aria-label="Close mobile menu"><i class="bi bi-x-lg"></i></button>
82  </div>
83  <ul class="mob-nav-links">
84    <li><a href="/">Home</a></li>
85    <li><a href="/Agriculture-News/">News</a></li>
86    
87    <!-- Crops & Farming Group -->
88    <li>
89        <a href="#" class="mob-submenu-toggle">Crops & Farming <i class="bi bi-chevron-down"></i></a>
90        <ul class="mob-submenu">
91            <li><a href="/Crop-Cultivation/">Crop Cultivation</a></li>
92            <li><a href="/horticulture/">Horticulture</a></li>
93            <li><a href="/Soil-Management/">Soil Management</a></li>
94            <li><a href="/Organic-Farming/">Organic Farming</a></li>
95            <li><a href="/Agriculture-Decisions/">Agronet Decisions</a></li>
96        </ul>
97    </li>
98
99    <!-- Livestock Group -->
100    <li>
101        <a href="#" class="mob-submenu-toggle">Livestock <i class="bi bi-chevron-down"></i></a>
102        <ul class="mob-submenu">
103            <li><a href="/Dairy-Farming/">Dairy Farming</a></li>
104            <li><a href="/Poultry-Farming/">Poultry Farming</a></li>
105            <li><a href="/Livestock-Farming/">Livestock Farming</a></li>
106            <li><a href="/Fish-Farming/">Fish Farming</a></li>
107        </ul>
108    </li>
109
110    <!-- Market & Finance Group -->
111    <li>
112        <a href="#" class="mob-submenu-toggle">Market & Finance <i class="bi bi-chevron-down"></i></a>
113        <ul class="mob-submenu">
114            <li><a href="/Agriculture-Market-News/">Market news &amp; prices</a></li>
115            <li><a href="/Agriculture-Finance/">Agri finance &amp; credit</a></li>
116            <li><a href="/reports/">Crop &amp; commodity reports</a></li>
117            <li><a href="/Agriculture-Products/">Compare products</a></li>
118            <li><a href="/Agriculture-Marketing/">Agri marketing</a></li>
119            <li><a href="/Global-Agriculture-News/">Global market news</a></li>
120        </ul>
121    </li>
122
123    <!-- Services & PR -->
124    <li>
125        <a href="#" class="mob-submenu-toggle">Services & PR <i class="bi bi-chevron-down"></i></a>
126        <ul class="mob-submenu">
127            <li><a href="/media-services/">Media Services</a></li>
128            <li><a href="/agri-food-pr/">Submit Your PR</a></li>
129            <li><a href="/advertise-with-us/">Sponsorships</a></li>
130            <li><a href="/advertise-with-us/">Advertise</a></li>
131        </ul>
132    </li>
133
134    <!-- Directory & Community -->
135    <li>
136        <a href="#" class="mob-submenu-toggle">Resources <i class="bi bi-chevron-down"></i></a>
137        <ul class="mob-submenu">
138            <li><a href="/agri-buyers-guide/">

138Buyer's Guide</a></li>
139            <li><a href="/Agriculture-Directory/">Agro Directory</a></li>
140            <li><a href="/community/">Community</a></li>
141            <li><a href="/agriculture-interviews/">Interviews</a></li>
142        </ul>
143    </li>
144
145    <li><a href="/Agriculture-Jobs/">Jobs & Staffing</a></li>
146    <li><a href="/Agriculture-Events/">Events</a></li>
147    <li><a href="/About-Us.html">About Us</a></li>
148    <li><a href="/contact-us/">Contact</a></li>
149  </ul>
150</div>
151`;
152
153/* ================= CSS ================= */
154const siteStyles = document.createElement("style");
155siteStyles.innerHTML = `
156  :root {
157    --primary-green: #0b5d3b;
158    --highlight-red: #e60000;
159    --dark-bg: #1a1a1a;
160    --light-bg: #f1ebe5;
161    --yellow-accent: #ffc600;
162  }
163
164  body { 
165    margin:0; 
166    font-family: 'Inter', sans-serif; 
167    color: #333;
168    overflow-x: hidden; 
169  }
170
171  h1, h2, h3, h4 {
172    font-family: 'Oswald', sans-serif !important;
173    font-weight: 600 !important;
174    color: rgb(56, 124, 44) !important;
175    font-size: 20px !important;
176    line-height: 24px !important;
177    margin-bottom: 8px;
178  }
179
180  /* Ensure article title links inherit the correct color */
181  h2 a, h3 a, h4 a {
182    color: rgb(56, 124, 44) !important;
183    text-decoration: none;
184  }
185
186  h2 a:hover, h3 a:hover, h4 a:hover {
187    text-decoration: underline;
188  }
189
190  h5, h6 {
191    font-family: 'Outfit', sans-serif !important;
192    font-weight: 600;
193  }
194
195  p, div, span, li, a {
196    font-family: 'Inter', sans-serif;
197  }
198
199  /* Ensure Header maintains its specific premium font */
200  .main-nav-list a, .sub-nav-list a, .logo a, .header-quick-btn {
201    font-family: 'Outfit', sans-serif !important;
202  }
203
204  header { 
205    height: auto !important; display: block !important; padding: 0 !important; 
206    border: none !important; background: none !important; width: 100% !important; 
207  }
208
209  /* 🟢 TOP AD BANNERS */
210  .header-top-ad {
211    display: grid; grid-template-columns: 1fr 2.8fr 1fr; width: 100%;
212    background: #000; line-height: 0; align-items: stretch;
213  }
214  .header-top-ad .ad-box, .header-top-ad .side-ad {
215    width: 100%; height: 130px; overflow: hidden;
216  }
217  .header-top-ad img { width: 100%; height: 100%; object-fit: cover; display: block; }
218
219  /* 🌑 SOCIAL BAR */
220  .header-social-bar {
221    display: flex; justify-content: space-between; align-items: center;
222    background: var(--primary-green); color: #fff; padding: 6px 25px; font-size: 13px;
223  }
224  .header-social-bar a { color: #fff; text-decoration: none; margin-right: 15px; transition: 0.2s; }
225  .header-social-bar a:hover { color: var(--yellow-accent); }
226  .header-social-bar i { margin-right: 5px; }
227
228  /* ⚪ BRANDING ROW */
229  .header-row1 {
230    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
231    padding: 15px 25px; background: var(--light-bg); border-bottom: 1px solid #ddd;
232    position: relative;
233  }
234  .header-row1 .logo img { height: 75px; width: auto; display: block; }
235  .header-row1-actions { display: flex; gap: 10px; }
236  .row1-left { justify-self: start; }
237  .row1-right { justify-self: end; }
238
239  .header-quick-btn {
240    display: inline-flex; padding: 8px 18px; font-size: 11px; font-weight: 800;
241    text-transform: uppercase; color: #fff; text-decoration: none;
242    background: var(--highlight-red); border-radius: 4px; transition: 0.2s;
243    letter-spacing: 0.5px; white-space: nowrap; align-items: center; justify-content: center;
244  }
245  .header-quick-btn:hover { background: #b30000; color:#fff; }
246
247  .menubar { display: none; cursor: pointer; font-size: 32px; color: #333; }
248
249  /* 🌑 MAIN NAV (BLACK) */
250  .header-row2 { background: var(--dark-bg); border-bottom: 2px solid #333; }
251  .main-nav-list {
252    display: flex !important; list-style: none !important;
253    margin: 0 !important; padding: 0 !important; justify-content: center !important; flex-wrap: nowrap !important;
254  }
255  .main-nav-list li { border-right: 1px solid rgba(255,255,255,0.1); }
256  .main-nav-list a {
257    display: block !important; padding: 12px 14px !important; font-size: 12px !important;
258    font-weight: 700 !important; color: #fff !important; text-decoration: none !important;
259    text-transform: uppercase !important; transition: 0.2s !important; white-space: nowrap !important;
260  }
261  .main-nav-list a:hover { background: rgba(255,255,255,0.1); color: var(--yellow-accent) !important; }
262
263  /* 🌿 SUB NAV (GREEN) */
264  .header-row3 { background: #084d31; border-top: 1px solid #0d6d45; }
265  .sub-nav-list {
266    display: flex !important; list-style: none !important;
267    margin: 0 !important; padding: 0 !important; justify-content: center !important; flex-wrap: nowrap !important;
268  }
269  .sub-nav-list li { border-right: 1px solid rgba(255,255,255,0.2); }
270  .sub-nav-list a {
271    display: block !important; padding: 10px 14px !important; font-size: 11px !important;
272    font-weight: 700 !important; color: #fff !important; text-decoration: none !important;
273    text-transform: uppercase !important; transition: 0.2s !important; white-space: nowrap !important;
274  }
275  .sub-nav-list a:hover { background: rgba(255,255,255,0.1); }
276
277  /* MEGA DROPDOWN */
278  .market-dropdown { position: relative; }
279  .market-mega {
280    display: none; position: absolute; left: 0; top: 100%; min-width: 260px;
281    background: #fff; border-top: 3px solid var(--primary-green);
282    box-shadow: 0 10px 20px rgba(0,0,0,0.2); z-index: 10000;
283  }
284  .market-dropdown:hover .market-mega { display: block; }
285  .market-mega a {
286    display: block; padding: 12px 20px; font-size: 13px; color: #333 !important;
287    text-decoration: none; border-bottom: 1px solid #eee; text-transform: none;
288  }
289  .market-mega a:hover { background: var(--light-bg); color: var(--primary-green) !important; padding-left: 25px !important; }
290
291  /* ── Mobile ── */
292  .mob-drawer-backdrop {
293    display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5);
294    backdrop-filter: blur(3px); z-index: 9000;
295  }
296  .mob-drawer-backdrop.open { display: block; }
297  .mob-drawer {
298    position: fixed; top: 0; right: -320px; width: 300px; height: 100vh;
299    background: #fff; z-index: 9001; overflow-y: auto; transition: right 0.3s ease;
300  }
301  .mob-drawer.open { right: 0; }
302  .mob-drawer-header {
303    display: flex; justify-content: space-between; align-items: center;
304    padding: 15px 20px; background: var(--dark-bg); color: #fff;
305  }
306  .mob-drawer-header button { background:none; border:none;

306 color:#fff; font-size:24px; cursor:pointer; }
307  .mob-nav-links { list-style:none; padding:0; margin:0; }
308  .mob-nav-links > li > a { display:block; padding:15px 25px; color:#333; text-decoration:none; border-bottom:1px solid #eee; font-weight: 600; }
309  .mob-submenu { display: none; list-style: none; padding: 0; background: #f9f9f9; }
310  .mob-submenu a { display: block; padding: 10px 40px; color: #666; text-decoration: none; font-size: 14px; }
311  .mob-submenu-toggle i { float: right; transition: 0.3s; }
312
313  @media (max-width: 1100px) {
314    .header-top-ad { grid-template-columns: 1fr; }
315    .header-top-ad .side-ad { display: none; }
316    .header-row2, .header-row3, .header-social-bar, .header-row1-actions { display: none; }
317    .header-row1 { display: flex; justify-content: space-between; padding: 10px 20px; }
318    .menubar { display: block; }
319    .header-row1 .logo img { height: 60px; }
320  }
321`;
322document.head.appendChild(siteStyles);
323
324/* ================= JS ================= */
325(function () {
326  const btn = document.getElementById('mob-menu-btn');
327  const closeBtn = document.getElementById('mob-close-btn');
328  const backdrop = document.getElementById('mob-backdrop');
329  const drawer = document.getElementById('mob-drawer');
330
331  const openDrawer = () => { drawer.classList.add('open'); backdrop.classList.add('open'); document.body.style.overflow = 'hidden'; };
332  const closeDrawer = () => { drawer.classList.remove('open'); backdrop.classList.remove('open'); document.body.style.overflow = ''; };
333
334  if (btn) btn.addEventListener('click', openDrawer);
335  if (closeBtn) closeBtn.addEventListener('click', closeDrawer);
336  if (backdrop) backdrop.addEventListener('click', closeDrawer);
337
338  document.querySelectorAll('.mob-submenu-toggle').forEach(toggle => {
339    toggle.addEventListener('click', (e) => {
340      e.preventDefault();
341      const sub = toggle.nextElementSibling;
342      const icon = toggle.querySelector('i');
343      const isOpen = sub.style.display === 'block';
344      sub.style.display = isOpen ? 'none' : 'block';
345      icon.style.transform = isOpen ? 'rotate(0)' : 'rotate(180deg)';
346    });
347  });
348})();