EDIT: My source is at https://bitbucket.org/kunaladhia01/studentaccounts/src
css file is under static/css/main.css
html is at template/student/index.html
So far, my code looks like this
<div class="content-wrap">
<header class="hero-area" id="home">
<div class="container">
<div>
<div class="nav navbar-inverse sticky-navigation navbar-fixed-top" data-spy="affix" data-offset-top="200">
<div class="container">
<nav>
<div class="nav-wrapper">
<form onsubmit="return false;">
<div class="input-field">
<input id="search" type="search" required placeholder="Search">
<label for="search"><i class="material-icons">search</i></label>
<i class="material-icons">close</i>
</div>
</form>
<button class="menu-icon" id="open-button">
<i class="mdi-navigation-menu"></i>
</button>
</div>
</nav>
</div>
</div>
</div>
There are two problems I have so far, which should be an easy fix, but its been 3 hours and I still have no progress
zippyshare com/v/h2ThM1Xi/file.html
zippyshare com/v/0h9KvaQI/file.html
(add the dot in)
I need to make the menu icon go into the same row as the search bar (class="row" wont work) and there's this blue bar behind the search bar, which i have no idea where it came from
Related
I take out the codes related to menu area (as shown below) from index.html to an independent file header.html,
and then include header.html into index.html with,
<body>
<div id="header"></div>
...
<script>
$("#header").load("header.html");
</script>
</body>
However, when I click the search button, there is no response. Originally, a search box should appear as shown below.
The related codes are listed below, (the complete example is here)
<!-- page search box -->
<div class="page_search_box">
<div class="search_close">
<i class="ion-close-round"></i>
</div>
<form class="border-bottom" action="#">
<input class="border-0" placeholder="Enter keyword..." type="text" />
<button type="submit"><i class="ei ei-search"></i></button>
</form>
</div>
<div class="main_header_right d-flex align-items-center">
<div class="header_account">
<ul class="d-flex">
<li class="header_search"> <i class="ei ei-search"></i> </li>
</ul>
</div>
<div class="canvas_open">
<i class="ion-navicon"></i>
</div>
</div>
What's wrong?
I'm working on making a site, and im currently dealing with BS4.1.3
I'm still new to this world so i have this issue right now:
<div class="container">
<nav class="navbar sticky-top">
<div class="grid">
<div class="row">
<div class="col-md-4">
<a class="btn btn-primary" data-toggle="collapse" href="#collapse-top-menu" role="button" aria-expanded="false" aria-controls="collapse-top-menu">
<img src="img/baseline-menu-24px.svg">
</a>
</div>
<div class="col-md-4">
<a class="navbar-brand" href="#">
<img src="img/bootstrap-solid.svg" width="40" height="40">
</a>
</div>
<div class="col-md-4">
Test
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="collapse" id="collapse-top-menu">
<input type="text" class="form-control" id="input-top-collapse-search" placeholder="Cosa stai cercando?">
</div>
</div>
</div>
</div>
</nav>
</div>
But the end result it's like this
While i wanted that the first blue button and the "logo" (B) were aligned, "test" a lot more in the right part of the navbar
Also the bottom search bar should be the same width as the container, so full lenght
<div class="container">
<nav class="navbar sticky-top">
<div class="grid">
<div class="row">
<div class="col-md-4">
<a class="btn btn-primary" data-toggle="collapse" href="#collapse-top-menu" role="button" aria-expanded="false" aria-controls="collapse-top-menu">
<img src="img/baseline-menu-24px.svg">
</a>
</div>
<div class="col-md-8 pull-right">
<a class="navbar-brand" href="#">
<img src="img/bootstrap-solid.svg" width="40" height="40">
<span>Test</span>
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="collapse" id="collapse-top-menu">
<input type="text" class="form-control" id="input-top-collapse-search" placeholder="Cosa stai cercando?">
</div>
</div>
</div>
</div>
</nav>
</div>
.collapse input{
width:100%;
}
I am on mobile Stack Overflow app hence not able to test this.
In Bootstap 4, to put the test at the right of the navbar you can try,
<ul class="navbar-nav ml-auto">The content which goes to right comes here as a li</ul>
Also for aligning the blue button (The button you are using here is called as hamburger, remember that) can be aligned by using some margin-top for it.
Just use a CSS selector to select the hamburger and give some margin-top property to it.
Please consider adding a codepen so that we mobile users can play around with your code.
I am using bulma CSS framework to build a webapp.
As stated in the question, I want to add a progress bar in a bottom navbar, but the progress bar doesn't show up. Any help would be appreciated :
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" rel="stylesheet"/>
<div class="navbar is-success" role="player" aria-label="main player">
<div class="navbar-menu">
<div class="navbar-start">
<div class="navbar-item">
<progress class="progress" value="15" max="100">15></progress>
</div>
</div>
</div>
</div>
I'm using Bootstrap but with a non-collapse nav. I'm trying to have the search form placed in center of the col-md-6. I seem to have tried everything so far but nothing works but it still aligns left in the column. Anyone know how I can achieve that?
Here's my code:
<div class="navbar navbar-default">
<div class="container" style="margin-top:14px;">
<div class="row">
<div class="col-md-3">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="#"><%= image_tag ("logo.png") %></a>
</div>
</div>
<div class="col-md-6">
<div class="navbar-header search">
<input type="text" id="search" class="form-control" placeholder="Search"></input>
</div>
</div>
<div class="col-md-3">
<div class="navbar-header pull-right">
<button type="button" class="btn btn-link" style="margin-top:7px;text-decoration:none;font-weight:bold;">Sign In</button>
</div>
</div>
</div>
</div>
</div>
Thanks alot in advance!
you can do it with following set of CSS rules:
<div class="row">
<div class="col-md-3">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="#"><%= image_tag ("logo.png") %></a>
</div>
</div>
<div class="col-md-6" style="
text-align: center;
">
<div class="text-center navbar-header search" style="
display: inline-block;
float: none;
margin: 0 auto;
">
<input type="text" id="search" class="form-control" placeholder="Search">
</div>
</div>
<div class="col-md-3">
<div class="navbar-header pull-right">
<button type="button" class="btn btn-link" style="margin-top:7px;text-decoration:none;font-weight:bold;">Sign In</button>
</div>
</div>
</div>
Make alignment within central column div text-align: center; and display the block with float: none;.
Here is plunk with properties assigned CSS classes: http://plnkr.co/edit/Iu3rnVK5dLi7fiaSHBRj?p=preview
make it's position absolute, check in firebug if it is inheriting float from any other class. In bootstrap you have to beware of these things as well.
after doing this go for auto margin or try with top left positions by giving values in percentage values
If you can replace the div parent with a form element you could do it without additional styles:
<div class="col-md-6">
<form class="form-inline text-center">
<input id="search" class="form-control" type="text" placeholder="Search">
</form>
</div>
JSFiddle
Bootstrap alignment classes
This is driving me nuts....as per this page http://kudosoo.com/twofolio.html
there is an issue with the left nav working correctly.The top part of the menu disappears upon loading. I've tried adjusting the css and html in different ways to solve this but nothing has worked to date.
I believe its linked to the either the #container or how the drop dwon menu is showing on the page, seems to be sitting on top of the menu.
Any help is gratefully received.
Main page code is below. Example page is here
<div id="preloader">
<div id="status">
<p class="center-text">
Loading the content...
<em>Loading depends on your connection speed!</em>
</p>
</div>
</div>
<div class="all-elements">
<div id="sidebar" class="page-sidebar">
<div class="page-sidebar-scroll">
<div class="sidebar-controls">
</div>
<div class="sidebar-header">
<img class="sidebar-logo round-decoration" src="images/general-nature/8s.jpg" alt="img">
<h4 class="center-text">kudosoo</h4>
<em class="center-text">Get badged today</em>
</div>
<div class="sidebar-breadcrumb">
<div class="sidebar-decoration"></div>
<p>Navigation</p>
<div class="sidebar-decoration"></div>
</div>
<div class="navigation-items"></div>
<div class="nav-item">
Home<em class="unselected-nav"></em>
</div>
<div class="sidebar-decoration"></div>
<div class="nav-item">
Activity<em></em>
<div class="nav-item-submenu active-submenu">
<div class="sidebar-decoration"></div>
Received <em class="unselected-sub-nav"></em>
Awarded <em class="unselected-sub-nav"></em>
Friends <em class="unselected-sub-nav"></em>
</div>
</div>
<div class="sidebar-decoration"></div>
<div class="nav-item">
Select Badge<em class="dropdown-nav"></em>
<div class="nav-item-submenu">
<div class="sidebar-decoration"></div>
Wide item Portfolio <em class="selected-sub-nav"></em>
</div>
</div>
<div class="sidebar-decoration"></div>
<div class="nav-item">
My Profile<em class="unselected-nav"></em>
</div>
<div class="sidebar-decoration"></div>
<div class="nav-item">
Close<em class="unselected-nav"></em>
</div>
</div>
<div class="sidebar-breadcrumb">
<div class="sidebar-decoration"></div>
<p>Let's get social!</p>
<div class="sidebar-decoration"></div>
</div>
<div class="navigation-items">
<div class="nav-item">
Facebook<em class="link-nav"></em>
</div>
<div class="sidebar-decoration"></div>
<div class="nav-item">
Twitter<em class="link-nav"></em>
</div>
</div>
<div class="sidebar-decoration"></div>
<p class="sidebar-copyright center-text">Copyright 2014.
<br>All rights reserved.</p>
</div>
</div>
<div id="content" class="page-content">
<div class="content-controls solid-color fixed-header">
<em class="content-title">Who's getting Kudosoo today?!</em>
LogOut
</div>
<div class="fixed-header-clear"></div>
<!---HTML code not to change ends-->
<div class="content">
<div id="container">
</div>
<!--Search options to find firends, requests and rejections-->
<div id="friendsfilter">
<form id="friendsfilter">
<div class="error" style="display:none"></div>
<div class="form-group">
<div class="input-group input-group-hg input-group-rounded">
<span class="input-group-btn">
<button id="find_button" type="button" class="btn"><span class="fui-search"></span>
</button>
</span>
<input type="text" id="friendsearch" placeholder="Find Friend" class="form-control" />
</div>
</div>
<select name="huge" class="btn-group select select-block mbl select-multiple" id="s_Friends">
<option value="0">Click to manage friend connections</option>
<option value="f_connected">Friends</option>
<option value="f_requests">Requests</option>
<option value="f_rejected">Declined</option>
<option value="f_sent">Sent</option>
</select>
<div id="FriendsConnected"></div>
<div id="FriendsPending"></div>
<div id="FriendsRejected"></div>
<div id="FriendsSent"></div>
</form>
</div>
<!--Friends profile info and stats-->
<div id="container friendsProfile">
<form>
<div class="error" style="display:none"></div>
<button id="friendsProfile" class="button button-red">Unfriend</button>
</form>
</div>
<!--Displays a blank no user image on the page if no matches are found in the parse database or displays an image of the user if a match is found-->
<div id="container">
<img style="display:none" src="/img/no-user.png" id="no_user" alt="No user found" class="BadgeImgOutline responsive-image">
<div id="userimgs"></div>
</div>
<div id="container" class="container no-bottom">
<!---List of connected friends is generated from script below, the different divs split the results depending which button is clicked-->
<div id="containerFriends"></div>
<div id="containerFriendsPending"></div>
<div id="containerFriendsRejected"></div>
<div id="containerFriendsRequestSent"></div>
<div id="containerFriendsConnected"></div>
<div id="containerFriendsProfile"></div>
</div>
<!--Displays friends uploaded badges after the user clicks on their profile picture-->
<div id="container">
<div id="badgeimgs"></div>
</div>
</div>
</div>
</div>
</div>
<!--Footer stuff-->
<div class="container">
<div type="button" id="decline" class="btn btn-danger mrs"></div>
<div class="footer-socials">
</div>
<p class="copyright uppercase center-text no-bottom">Copyright 2014
<br>All rights reserved</p>
</div>
<div style="height:350px"></div>
</div>
</div>
So, as I can see it.. really, the navigation shouldn't be showing at all when the page is loaded, correct? As the navigation is shown when the main page content is slid to the right?
z-index is used to order the layers of divs in HTML. The higher the number, the more 'forward' it will be placed on the page (back to front).
Currently, your <div id="content"> has a z-index of 10, whilst your <div id="sidebar"> has a z-index of 2.
This means your Content div will be placed infront of your Sidebar div, causing the top of the sidebar to be hidden.
Changing these values in your CSS file will change the order.
.page-content is on line 9 of your style.css file
.page-sidebar is on line 25 of your style.css file
i think in line 135 you closed the div wrong
remove closing div from line 135 and place in the end of side bar code at line 162
<div class="nav-item">
Close<em class="unselected-nav"></em>
</div>
</div>
Make the Z-index of your sidebar to 11. Your page content has z-index of 10
<div id="sidebar" style="z-index:11" class="page-sidebar">
I actually resolved this by adjusting <div style="height:350px"></div> to
<div style="height:3350px"></div> worked. The menu now works as expected. Not shown when the page loads, but shown in full when the button is clicked to display it.