Not Solved [How To?] How to make a responsive nav bar like xenforo
#1
Not Solved
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
Reply
#2
Not Solved
(2021-06-02, 02:03 AM)Pradip Wrote: 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


what exactly you want ?
Reply
#3
Not Solved
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]
[Image: Screenshot-2021-06-02-16-23-07-832-com-a...chrome.jpg]
[Image: Screenshot-2021-06-02-16-23-34-410-com-a...chrome.jpg]
Reply
#4
Not Solved
intresting topic , but as like you i am not so good at css.
Reply
#5
Not Solved
You need the mobile version or pc too?

Take a look at https://reusers.to/ mobile version
[Image: 9WETQ7Z.png]  

[Image: vn5CzUd.png]
[Image: ad1.gif]
Reply
#6
Not Solved
(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 ?
Reply
#7
Not Solved
please help me someone 🙏
Reply
#8
Not Solved
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
Reply
#9
Not Solved
@PARADOXP

Thank your suggestions and support.

The problem is i don't know how to use it in the header template...
please help me...
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)