Hello everyone ,
i am requesting you all to solve this issue that i don't know how to make a responsive header like xenforo.
The Header of Xenforo is a attractive edition. If anyone can make happens that in myBB i would be greatlfull to him.
Thanks.
@Pradip
visit:-
https://xenforo.com/community/
you will see mobile friendly responsive header with responsive menu bar.
i am a newbie in css coding.. I can't make ie happen.
![[Image: Screenshot-2021-06-02-16-22-26-131-com-a...chrome.jpg]](https://camo.mybb.com/b3e89b8caf8fd9dc736ee97ce1a335a203976608/68747470733a2f2f692e6962622e636f2f59793057545a512f53637265656e73686f742d323032312d30362d30322d31362d32322d32362d3133312d636f6d2d616e64726f69642d6368726f6d652e6a7067)
![[Image: Screenshot-2021-06-02-16-23-07-832-com-a...chrome.jpg]](https://camo.mybb.com/fad3411c3c5832f73399921c5fefc75d523312c5/68747470733a2f2f692e6962622e636f2f6b79316d764a6d2f53637265656e73686f742d323032312d30362d30322d31362d32332d30372d3833322d636f6d2d616e64726f69642d6368726f6d652e6a7067)
![[Image: Screenshot-2021-06-02-16-23-34-410-com-a...chrome.jpg]](https://camo.mybb.com/524f317598d30525f13bfd842e94008a93d3defc/68747470733a2f2f692e6962622e636f2f4e6d6a353437592f53637265656e73686f742d323032312d30362d30322d31362d32332d33342d3431302d636f6d2d616e64726f69642d6368726f6d652e6a7067)
intresting topic , but as like you i am not so good at css.
(2021-06-03, 12:32 AM)Mastersly Wrote: [ -> ]You need the mobile version or pc too?
Take a look at https://reusers.to/ mobile version
Yesss..... it's like that what i was saying...
can you please tell mw uow to do this ?
here is just an example with only html and css... you can apply it to the header.
The Html :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Responsive Navigation Bar</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header id="header"><!--header-start-->
<div class="container">
<div class="header_left">
<a class="logo" href="#"><img src="images/logo.png" alt="logo"></a>
</div>
<div class="header_right">
<label for="menuTrigger" class="nav_ico"><i class="fa fa-bars" style="float: right"></i></label>
<input id="menuTrigger" type="checkbox" name="">
<nav class="main_nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Service</a>
<i class="fa fa-caret-down"></i>
<ul>
<li><a href="#">Web Designing</a></li>
<li><a href="#">Web Development</a></li>
<li><a href="#">Digital Marketing</a>
<i class="fa fa-caret-down"></i>
<ul>
<li><a href="#">Service 11</a></li>
<li><a href="#">Service 11</a></li>
<li><a href="#">Service 11</a>
<i class="fa fa-caret-down"></i>
<ul>
<li><a href="#">Service 111</a></li>
<li><a href="#">Service 111</a></li>
<li><a href="#">Service 111</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</div>
</div>
</header><!--header-end-->
</body>
</html>
The CSS :-
*,*:after,*:before{
box-sizing: border-box;
}
body {
background: #e4e4e4 url(../images/bg.jpg) center bottom;
background-size: cover;
min-height: 100vh;
font-family:arial;
font-size: 16px;
margin: 0;
}
img{
max-width: 100%;
width: 80px;
height: auto;
}
#header{
padding: 15px 30px;
display: flex;
align-items: center;
justify-content: space-between;
background: #022335;
position: fixed;
left: 0;
top: 0;
width: 100%;
}
.container{
max-width: 1100px;
width: 100%;
margin: 0 auto;
padding: 0 15px;
display: flex;
align-items: center;
justify-content: space-between;
}
.nav_ico{
display: block;
width: 40px;
cursor: pointer;
}
.main_nav {
float: right;
}
.main_nav ul{
margin: 0;
padding: 0px;
list-style: none;
}
.main_nav ul li{
float: left;
margin: 0 0 0 5px;
position: relative;
font-size: 20px;
letter-spacing: 1px;
font-weight: 300;
position: relative;
}
.main_nav ul li a {
color: white;
display: block;
line-height: 1.4;
text-decoration: none;
padding: 5px 15px;
transition: all 0.3s ease-out;
}
.main_nav ul li:hover > a{
color: #0a91da
}
.main_nav ul li i{
position: absolute;
right: 0;
top: 10px;
color: #fff;
}
.main_nav ul li:hover > i{ color: #0a91da }
.main_nav ul ul{
position: absolute;
left: 0;
top:calc(100% + 15px);
white-space: nowrap;
opacity: 0;
transition: all 0.3s ease-out;
pointer-events: none;
}
.main_nav ul ul li{
float: none;
margin:0;
border-bottom: 1px solid #fff;
}
.main_nav > ul > li > ul:after{
content: "";
position: absolute;
bottom: 100%;
height: 16px;
width: 100%;
left: 0;
}
.main_nav ul ul ul{
left: 100%;
top:0;
}
.main_nav ul li:hover > ul{
opacity: 1;
pointer-events: auto;
}
.main_nav ul ul li a{
background:#022335;
}
.main_nav ul li:hover ul li:hover > a{
color: #fff;
background:#0a91da;
}
.main_nav ul ul li i{
transform: rotate(-90deg);
}
.main_nav ul ul li:hover i{ color: #fff; }
/*This Media Query use for iPad Portrait View*/
@media only screen and (min-width:768px) and (max-width:991px){
.main_nav ul li{ margin: 0 ; font-size: 16px; }
.main_nav ul li a{
padding: 5px 10px;
}
}
@media screen and (min-width: 768px){
.nav_ico,
#menuTrigger{ display: none;}
}
/*This Media Query use for Mobile View*/
@media screen and (max-width: 767px){
.nav_ico{
float: right;
right: 2px;
display: block;
position: relative;
z-index: 10;
color: #fff;
font-size: 36px;
}
.main_nav {
position: fixed;
left: 0;
top: 0;
padding:0;
background: #053e5d;
z-index: 8;
height: /*calc(100vh - 74px);*/ 100%;
overflow: hidden;
width: calc(100% - 80px);
transition: all 0.3s ease-out;
transform: translateX(-100%);
}
.main_nav ul li {
float: none;
margin: 0 !important;
padding: 0 !important;
border-bottom: 1px solid;
}
.main_nav ul li a {
display: block;
color: #fff;
padding: 10px;
}
.main_nav > ul > li:hover > a{
/*background:#1D1E22;*/
background: linear-gradient(to left,#fff,#fff);
color: #000;
transition: all 0.5s ease;
}
.main_nav ul ul{
position: static;
pointer-events: auto;
opacity: 1;
height: 0;
overflow: hidden;
}
.main_nav ul ul li a{
padding-left: 30px;
}
.main_nav ul ul ul li a{
padding-left: 60px;
}
.main_nav ul ul ul ul li a{
padding-left: 90px;
}
.main_nav ul li:hover > ul {
height: auto;
}
.main_nav ul li i{ right: 10px !important; }
.main_nav ul li:hover > i{ color: #fff }
.main_nav ul ul li i{transform: rotate(0deg);}
#menuTrigger{
opacity: 0;
position: fixed;
width: 0;
height: 0;
margin: 0
}
#menuTrigger:checked + .main_nav{
transform: translateX(0%);
}
}
see the preview page at :-
https://storyworlds.in/dustbin/navbar.html
@PARADOXP
Thank your suggestions and support.
The problem is i don't know how to use it in the header template...
please help me...