I have made a menu in wordpress (the site is [http://andreadis.loginet.gr/][1]). This menu is auto generated when user creates a menu item from wordpress. And here i am confused about how can i make it open vertical in responsive.
Header.php is
<!-- header -->
<header>
<div class="overNavPanel">
<div class="container">
<div class="col-md-12">
<div class="row overNavPanel">
<div class="col-md-2 col-sm-6" id="logo">
<img class="img-reponsive" src="/wp-content/uploads/2015/12/logo.png" alt="logo.png">
</div>
<div class="col-md-4 col-md-offset-6 col-sm-6" id="top-right-contact">
<image class="img-reponsive" src="/wp-content/uploads/2015/12/contact.png" alt="call-icon.png">
</div> <!--col-md-4 col-md-offset-7-->
</div><!--row-->
</div>
</div> <!--container-->
</div><!--overNavPanel-->
<nav id="myNavbar" class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navDiv">
<div class="container">
<div class="col-md-12">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<ul id="nav" class="nav nav-pills nav-justified">
<li><?php wp_nav_menu(array('container_class'=>'nav','container'=>'container'));?></li>
</div>
</div>
</div>
</div>
</header>
<!-- /header -->
A couple of findings:
You are loading Bootstrap JavaScript twice. I guess this is why collapsing is not working. Make sure that Bootstrap JS is loaded only once.
The (non-PHP-generated) HTML structure above is not fully in line with the Bootstrap examples, so you may need to modify it to make it work properly. Here's my fiddle for your case: https://jsfiddle.net/masa671/bjv1ovbw/
The PHP-generated part: a call to wp_nav_menu() to generate a list item will not work. You need a PHP implementation that generates the correct structure for Bootstrap. This one looks promising, but I guess you are already using a Bootstrap theme for Wordpress that might also have a corresponding implementation? Which theme are you using?
you can use this plugin to create a responsive menu for you responsive-menu
or you can check this site navnav.co
there is many ready responsive navs select the one you like and apply its JS & CSS
Related
I am learning bootstrap. At this time, I'm trying to add a footer to my page. I need my footer to look like this:
+-----------------------------------------------------------------+
| Hello Thank you for visiting [logo] |
+-----------------------------------------------------------------+
Basically, the idea is to have three sections. The content in the first is left aligned. The content in the second is centered. Finally, the content in the third is right aligned. In an attempt to do this, I did the following:
<nav class="navbar navbar-static-top navbar-dark bg-inverse">
<span class="navbar-brand">Hello</span>
<span class="center-block"><span class="center-text">Thank you for visiting</span></span>
<span class="pull-right"><div class="pull-right">[logo]</div></span>
</nav>
Unfortunately, this does not work. The content does not appear on the same line (its all jagged, I was hoping for it be vertically centered). Also, the "Thank you for visiting" is not centered. It is left justified.
I'm not sure what I"m doing wrong.
I'm not sure why you are using nav but this solution might work for you:
<div class="container">
<div class="row">
<div class="col-sm-4 text-left">
<p>Hello</p>
</div>
<div class="col-sm-4 text-center">
<p>Thank you for visiting</p>
</div>
<div class="col-sm-4 text-right">
<p>[logo]</p>
</div>
</div>
</div>
Hello use this code this works perfect. Make sure that you add the bootstrap js and css files.
<footer class="navbar navbar-static-bottom navbar-default">
<div class="container" style="width">
<div class="navbar-header">
<div class="navbar-brand" style="padding-left:0px; !important;color:#555 !important;">
Hello
</div>
</div>
<div class="navbar-header">
<div class="navbar-brand" style="position:absolute;text-align:center;width:1000px;">
Welcome to my website
</div>
</div>
<div class="navbar-header navbar-right">
<div class="navbar-brand">
Logo goes here
</div>
</div>
</div>
</footer>
Enjoy....!
I have a private video site that's main aimed towards my home networks and the desktop computers, however, the site was constructed on a 1920x1080 resolution so if that's any smaller that site looks like a catastrophe. here is the code for the page.
<nav class="navbar navbar-trans navbar-fixed-top" role="navigation">
<div style="width:66%" class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-collapsible">
<ul class="nav navbar-nav navbar-left">
<li>Network TV</li>
</ul>
</div>
</div>
</nav>
<div class="col-md-4 col-md-offset-3" style="width:100%; height=:100%; color:black; margin-top:13%; text-align:center; border: 0">
<div class="row center-row">
<div style="width:10%" class="col-md-4"><div style="background-color:transparetn" class="well"><p><u><h4>Season1</h4></u></p></div></div>
<div style="width:10%"class="col-md-4"><div class="well"><p><u><h4>Season2<h4></u></p></div></div>
<div style="width:10%"class="col-md-4"><div class="well"><p><u><h4>Season3</u></p></div></div>
<div style="width:10%"class="col-md-4"><div class="well"><p><u><h4>Season4</h4></u></p></div></div>
<div style="width:10%"class="col-md-4"><div class="well"><p><u><h4>Season5</h4></u></p></div></div>
</div>
</div>
What I want to know
My question is why does this not scale down properly, when the screen is smaller I want the margins to adjust to fix the screen, but instead it all just goes into a vertical list all mixed my and improperly scaled
If you are using bootstrap you have no need for all the extra inline styles, by setting inline widths to your html you are taking away what makes bootstrap "boostrap" for sizing, bootstrap has a grid system, if you follow the grid system, your site will work correctly. Please read: w3 fools has a great starting point for begginers. http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
Also, after looking at your code I noticed you have col-4 set to 10% width, it does not work like that. col-4, is more like 33% if you are using the most common 12 column grid. that means by setting col-4 to 10% you are over riding bootstrap key features and is why it is not working for you.
In your example the last div should be </nav> for one thing. Along with this style tag inside of the container > style="width:66%". I would start with those things first.
<div class="navbar-collapse collapse" id="navbar-collapsible">
<ul class="nav navbar-nav navbar-left">
<li>Network TV</li>
</ul>
</div>
</div>
</div><!--CHANGE TO NAV-->
My code is save at http://jsfiddle.net/qba2xgh6/1/ , it comes from the Bootstrap official website.
Below is the code:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">My Brand</a>
</div>
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container main">
<p>
Hello, the main content starts here.
Hello, the main content starts here.
Hello, the main content starts here.
Hello, the main content starts here.
Hello, the main content starts here.
Hello, the main content starts here.Hello, the main content starts here.
</p>
</div>
The problem is that when I clicked the dropdown button at the right upper corner, the dropdown menu appears and covers the main content. How can I avoid this? I would like it to push down the main content.
That's because you are using the class navbar-fixed-top that makes the navbar stay fixed -- out of the flow on the document. You can:
Remove that class. But it will delete the behavior on all devices and resolutions too.
If you want to keep that for all but not for mobile then add this media query:
#media (max-width:768px) {
.main {
margin-top:0;
}
.navbar-fixed-top {
position:static;
}
}
Check this DemoFiddle
Remove the class navbar-fixed-top from the outermost <div>
You are seeing the intended behaviour for the fixed navigation. If you remove the .navbar-fixed-top class on the navigation it removes the 'stickiness' of the navigation and it'll follow the content flow.
You can a sample at http://jsfiddle.net/qba2xgh6/4/ , I also removed the margin from the .main as it's not needed anymore.
I faced this issue when I first started using Bootstrap. When you use the class navbar-fixed-top the navbar will stay at the top of the page. Remove this and then it'll work as expected.
I am using Bootstrap in ASP.net MVC 5 web application for responsive web design. My issue is I need to put image in header which is about width of 180px. but when i put image in header, it doesn't pushing down main body (next div) but overlap the information in body. I am struggling ... need help
http://getbootstrap.com/
<!--*************************** Header ***********************************-->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--#Html.ActionLink("Application name", "Home", "Dashboard", null, new { #class = "navbar-brand" })-->
<!---->
<img src="~/ImagesAndIcons/Images/LCM.jpg" style="max-width:15%;height:auto;" />
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div>
</div>
</div> <!--end header-->
<div class="body-content">
<!--*************************** Main Body ***********************************-->
<div id="body_main_wrapper">
<!--Functions Panel Wrapper (left-side)-->
<div id="Functions_Panel_Wrapper">
<a>functions lists.....</a>
</div>
<!--Functions Page Wrapper (right-side)-->
<div class="Function_Page_Wrapper">
#RenderBody()
</div> <!--end Function_Page_Wrapper-->
</div> <!--end body_main_wrapper-->
<!--*************************** Footer ***********************************-->
<div class="footer_wrapper">
<footer>
<div class="container">
<div class="footer_Title_Wrapper">
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</div> <!--end footer_Title_Wrapper-->
</div> <!--end container-->
</footer>
</div><!--end footer_wrapper-->
</div> <!--end body-content-->
Sounds like you're using a fixed header. When you're using the fixed header type, you have to pad the top of the body element to push the content down far enough to accommodate the header. By default, Bootstrap takes care of that for you, but if you increase the height of the header, then you have to adjust padding-top accordingly on the body element.
Add following code after end of the header
<div class="row visible-sm" style="height:90px;"></div>
So what I'm trying to do is have my navbar automatically center to anything that's in it.
What I want is:
Logo all the way on the left (pulled left)
Button all the way on the right (pulled right)
Search bar directly in the center of the navbar
What I've been having problems with is that the button can have different width (because it's a button where your username is displayed) and this moves the search bar I have making it not centered.
Here's my current code:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#"><img src="./assets/img/test_logo.png" /></a>
<div class="nav-collapse collapse">
<div class="span4 offset1">
<form class="navbar-form pull-right">
<div class="input-append">
<input class="span4" id="appendedInputButton" type="text" placeholder="Search...">
<button class="btn" type="button"><i class="icon-search"></i></button>
</div>
</form>
</div>
<ul class="nav pull-right">
<a class="button btn-active" href="" style="margin-top:5px" ><span><i class="icon-user"></i> Sign In</span></a>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
Note:
The width of the navbar should be 883px. The rest of the CSS should be Bootstrap's default.
Please help!
It should work as you've described, but that isn't what your code reflects.
Add pull-left to the <a> with the logo so it floats left. Get rid of pull-right from the <form> so it's not floating. Make sure both floating elements (the <a> and <ul> are defined before the <form>).
you could float the elements, adjust the width. like in this example http://jsfiddle.net/kevinPHPkevin/smWBZ/
.logo {
float:left;
}