MR SIP
body {margin:0;font-family:Arial, sans-serif;}
header {
display:flex;justify-content:space-between;align-items:center;
padding:10px 20px;flex-wrap:wrap;
}
.header-left {display:flex;align-items:center;gap:10px;}
.header-left img {width:50px;height:auto;}
.header-text h1 {font-size:22px;margin:0;font-weight:900;}
.header-text p {font-size:10px;margin:0;font-weight:700;color:#666;}
/* ✅ Desktop view ke liye search box center */
.header-search {
flex:1;
max-width:450px;
margin:0 20px;
position:relative;
display:flex;
order:2; /* ✅ beech me fix */
}
.header-search input {
width:100%;padding:8px 40px 8px 12px;border:1px solid #ddd;
border-radius:4px;font-size:14px;transition:border .3s;
}
.header-search input:focus {border-color:#00e0c6;outline:none;}
.header-search button {
position:absolute;right:5px;top:50%;transform:translateY(-50%);
border:none;font-size:16px;color:#fff;cursor:pointer;
padding:6px 12px;border-radius:4px;
background:#00e0c6; /* ✅ changed */
}
.search-results {
position:absolute;top:110%;left:0;width:100%;background:#fff;
border:1px solid #ddd;border-radius:4px;box-shadow:0 2px 6px rgba(0,0,0,.1);
max-height:250px;overflow-y:auto;display:none;z-index:1000;
}
.search-results li {
list-style:none;padding:8px 12px;font-size:14px;cursor:pointer;
transition:background .2s;
}
.search-results li:hover {
background:#00e0c6; /* ✅ changed */
color:#fff;
}
.header-social {display:flex;gap:12px;font-size:18px;}
.header-social a {color:#333;text-decoration:none;transition:color .3s;}
.header-social a:hover {color:#00e0c6;}
.header-actions {display:flex;align-items:center;gap:8px;order:3;}
.header-actions button {
padding:8px 14px;border:none;border-radius:4px;cursor:pointer;font-size:14px;
}
.quick-btn {background:#f5f5f5;color:#000;border:1px solid #ddd;}
.login-btn {background:#002d62;color:#fff;}
/* ✅ Toggle */
.menu-toggle {
font-size:22px;cursor:pointer;margin-left:8px;
color:#002d62;font-weight:900;
display:none;background:none;border:none;box-shadow:none;
}
.menu-toggle i {pointer-events:none;}
.menu-toggle.active {color:#00e0c6;} /* ✅ toggle active color */
/* Nav */
nav {background:#fff;}
nav ul {
list-style:none;margin:0;padding:0;
display:flex;gap:25px;justify-content:center;flex-wrap:wrap;
}
nav ul li {position:relative;}
nav ul li a {
text-decoration:none;color:#000;font-size:15px;font-weight:bold;
padding:5px 8px;border-radius:6px;
transition:background .3s,color .3s,transform .2s;
display:inline-block;
}
nav ul li a:hover {
color:#fff;
background:#00e0c6; /* ✅ changed */
transform:scale(1.05);
}
nav ul li ul {
display:none;position:absolute;top:100%;left:0;
background:#fff;list-style:none;padding:10px 0;min-width:180px;z-index:10;
}
nav ul li:hover ul {display:block;}
nav ul li ul li a {
display:block;font-size:14px;font-weight:bold;
padding:6px 15px;border-radius:4px;
}
nav ul li ul li a:hover {
color:#fff;
background:#00e0c6; /* ✅ changed */
}
/* Responsive */
@media(max-width:991px){
header {flex-direction:column;align-items:center;}
.header-left {order:1;}
.header-search {
order:0;
width:100%;
margin:10px 0;
max-width:100%;
}
.header-actions {order:2;}
.menu-toggle{display:inline-block;}
nav ul{flex-direction:column;align-items:flex-start;gap:10px;
padding:10px 20px;display:none;}
nav ul.show{display:flex;animation:slideDown .3s ease;}
nav ul li ul{position:static;padding:5px 0;}
.header-social {
margin-top:10px;display:flex;justify-content:center;width:100%;
}
}
@keyframes slideDown{
from{opacity:0;transform:translateY(-10px);}
to{opacity:1;transform:translateY(0);}
}
// ✅ Mobile menu toggle
const toggle=document.querySelector(‘.menu-toggle’);
const navMenu=document.querySelector(‘nav ul’);
toggle.addEventListener(‘click’,()=>{
navMenu.classList.toggle(‘show’);
toggle.classList.toggle(‘active’); // ✅ toggle color change
});
// ✅ Search functionality
const searchInput=document.getElementById(‘menuSearch’);
const searchBtn=document.getElementById(‘searchBtn’);
const resultsBox=document.getElementById(‘searchResults’);
const menuLinks=document.querySelectorAll(‘#mainMenu a’);
// Footer menu links from given footer code
const footerLinksData=[
{name:”Equity Funds”,href:”https://mrsip.in/668-2/”},
{name:”Debt Funds”,href:”#”},
{name:”Hybrid Funds”,href:”#”},
{name:”Tax Saver Fund (ELSS)”,href:”#”},
{name:”Index Funds”,href:”#”},
{name:”Downloads”,href:”#”},
{name:”Non Business Days”,href:”#”},
{name:”NAV History”,href:”#”},
{name:”IDCW”,href:”#”},
{name:”Total Expense Ratio”,href:”#”},
{name:”Mandatory Disclosures”,href:”#”},
{name:”Schemes ISIN codes”,href:”#”},
{name:”GSTIN Details”,href:”#”},
{name:”Facilities Offered”,href:”#”},
{name:”Numerical Examples”,href:”#”},
{name:”GST Registration”,href:”#”},
{name:”GST Filing”,href:”#”},
{name:”Income Tax Filing”,href:”#”},
{name:”TDS Filing”,href:”#”},
{name:”Company Registration (LLP, PVT.LTD)”,href:”#”},
{name:”SIP Calculator”,href:”#”},
{name:”SWP Calculator”,href:”#”},
{name:”Lumpsum Calculator”,href:”#”},
{name:”Mutual Fund Returns Calculator”,href:”#”},
{name:”EMI Calculator”,href:”#”}
];
function searchMenu(){
const term=searchInput.value.trim().toLowerCase();
resultsBox.innerHTML=”;
if(term.length{
const text=link.textContent.toLowerCase();
if(text.includes(term) && !seen.has(text)){
matches.push({name:link.textContent,href:link.getAttribute(‘href’)});
seen.add(text);
}
});
footerLinksData.forEach(item=>{
const text=item.name.toLowerCase();
if(text.includes(term) && !seen.has(text)){
matches.push(item);
seen.add(text);
}
});
if(matches.length>0){
matches.forEach(item=>{
const li=document.createElement(‘li’);
li.textContent=item.name;
li.onclick=()=>{window.location.href=item.href;};
resultsBox.appendChild(li);
});
resultsBox.style.display=’block’;
} else {
resultsBox.style.display=’none’;
}
}
searchInput.addEventListener(‘input’,searchMenu);
searchBtn.addEventListener(‘click’,searchMenu);
document.addEventListener(‘click’,(e)=>{
if(!document.querySelector(‘.header-search’).contains(e.target)){
resultsBox.style.display=’none’;
}
});
