Bootstrap 4, Cover template, masthead & mastfoot do not resize - responsive-design

I try to customize the cover template of bootstrap 4 taken from here:
https://getbootstrap.com/docs/4.0/examples/cover/
I succeed to replace the content of the page and it aligns well responsive to any small screen size as desired.
The following masthead and mastfoot however, do not react in a responsive way as hoped, so on e.g. iPhone 7 a horizontal scrolling is introduced.
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead">
<div class="inner">
<h3 class="masthead-brand">myLogo</h3>
<nav class="nav nav-masthead">
<a id="link1" class="nav-link active" href="#">longLongText1</a>
<a id="link2" class="nav-link" href="#"> longLongText2</a>
<a id="link3" class="nav-link" href="#"> longLongText3</a>
<a id="link4" class="nav-link" href="#"> longLongText4</a>
<a id="link5" class="nav-link" href="#"> longLongText5</a>
<a id="link6" class="nav-link" href="#"> longLongText6</a>
</nav>
</div>
</div>
... page content ...
<div class="mastfoot">
<div class="inner">
<p>Cover template for Bootstrap, by #mdo.</p>
<p id="debugIncidentContent">
Lengthy lengthy debug information goes in here...
</p>
</div>
</div>
</div>
</div>
</div>
When I reduce the content in masthead and mastfood drastically, the issue is no longer visible. So I know masthead and mastfoot are the root cause that break the responsive behaviour, but of course I’d like to use them with the correct content.
Any way to make this more responsive?
Thanks a lot for spending your time on obvious newbie issues...!

Related

How to resolve this issue with HTML menu in ASP.NET WebForms application?

I am new ASP.NET WebForms developer and I am using ASP.NET 4.5. I am struggling right now with developing the menu. I am using Bootstrap as the main style for the UI of my application. Also, I would like to keep using the normal HTML ul tags for developing this menu. However, I am struggling now with configuring the links in this menu.
The website navigation is as follows:
Home
About
Contact
Admin > Service Management
> User Managment
The first three pages; home, about and contact are under the same folder called Pages. Under Pages folder, there is another folder called Admin. This folder includes ServiceManagement and UserManagement pages. The problem which I am struggling with is that when the user is browsing ServiceManagement or UserManagement and he clicks on the link to Home page from the top menubar, he will got an error and the link will look like the following:
http://localhost:61090/Pages/Pages/About.aspx
Here's the code of the Menu:
<div class="container">
<nav class="navbar navbar-default">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-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.html">
<img src="../Assets/images/logo.png" alt="">
</a>
</div>
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown mega-dropdown">
Admin <span class="fa fa-angle-down"></span>
<ul class="dropdown-menu mega-dropdown-menu row">
<li class="col-sm-3">
<ul>
<li class="">
Service Management</li>
<li class="">User Management</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</nav>
</div>
So how can I resolve this issue?
Change your HTML markup from:
About
To
<asp:HyperLink ID="lnkAbout" runat="server" Text="About" NavigateUrl="~/Pages/About.aspx"></asp:HyperLink>
The key point to take from this, is that the NavigateUrl property uses a path relative to the root of your web application ~/. This makes it simple to reference pages/content from your ASPX pages etc.
HTML based approach
You could try to set the following in your Admin HTML files.
<HEAD>
<!-- Removed for brevity -->
<BASE href="http://yourURL/Pages/Admin">
<!-- Removed for brevity -->
</HEAD>
I am not 100% certain on this one so you will need to try it on your own (in the ServiceManagement and UserManagement pages only).
Place the attribute runat="server" inside the <a> tag.
For your href value, start with "~/" to identify the application root. See ASP.NET Web Site Paths.
e.g. <a runat="server" href="~/Pages/About.aspx">About</a>
You can also use the same format to link your image file:
e.g. <img runat="server" src="~/Assets/images/logo.png" alt="">

responsive design display none and visibility visable not switching

Hi all I am making my first responsive website.
I am doing it mobile first.
In my html I have given some elements which I do not want to be shown on mobile a class of mobile and those I don't want showing class of desktop
This is working brilliantly.
When I get to my tablet / desktop breakpoint and I reverse these to show the desktop menu for example, it is not working.
.desktop {visibility:visible;} .mobile {display:none;}
<div id="topbar">
<!--Mobile Nav-->
<section>
<div class="mobile container">
<div class="col12">
<div class="click">Menu</div>
<nav id="menu">
<li>home</li>
<li>club information</li>
<li>club kit</li>
<li>membership</li>
<li>event news</li>
<li>calendar</li>
<li>advice</li>
<li>gallery</li>
</nav>
</div>
</div>
</section>
<!--Desktop Nav-->
<section>
<div class="desktop container">
<div class="col12">
<nav id="menu">
<li>home</li>
<li>club information</li>
<li>club kit</li>
<li>membership</li>
<li>event news</li>
<li>calendar</li>
<li>advice</li>
<li>gallery</li>
</nav>
</div>
</div>
</section>
</div>
All you need to do is alternate the .mobile and .desktop classes to be display: block or display: none as and when you need things to be shown/hidden through out your break points.
You're confusing the use of display and visability in your current example

Foundation 5 sections

I'm having some issues with sections in Foundation 5.
<div class="section-container horizontal-nav" data-section="horizontal-nav">
<section>
<p class="title" data-section-title>Section 1</p>
<div class="content" data-section-content>
<ul class="side-nav">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li class="divider"></li>
<li>Link 1</li>
</ul>
</div>
The above code only yields a vertical list, not the horizontal that the code is supposed to trigger. The code works in 4 but not in 5. I assume its a javascript change but the 5 documentation doesn't mention sections and the side-nav documentation mentions nothing about the section-container classes. Anybody get this to work in 5 yet?
You can achieve something similar using top-bar in a class="large-12 columns" (or whatever number of columns you want). All you have to do is take care of the menu styles if you want it to look different from the classic top-bar.
Here's a simple example, is not too fancy but hopefully it'll help to get started:
<header class="row">
<div class="large-12 columns">
<nav class="top-bar" data-topbar="" role="navigation" data-options="is_hover:false">
<!-- All your menu code here -->
</nav>
</div>
</header>
http://jsfiddle.net/zdwo3aLc/embedded/result/

Rearrange Columns in Zurb Foundation

my problem is that while on a desktop I like having the menu first, and then the logo in the far right corner. Currently when I shrink the template to a mobile version, the logo goes under the menu which is not satisfactory. I would like to have it before the menu. I've tried using push/pull with no success.
Is it even possible to have the logo on top of the template when in mobile view?
Here is my code...
<div class="container" style="margin-top: 15px;">
<div class="row">
<div class="ten columns mobile-four">
<nav>
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</nav>
</div>
<div class="two columns mobile-four">
<img src="images/logo.png" alt="logo"/>
</div>
</div>
</div>
So first you can do away with the mobile-four class, it doesn't do anything (unless its custom to you). Looking at the documentation there is a mobile-[one two three], four would be the equivalent to leaving it off.
To fix the problem, simply apply a source ordering class, like so:
<div class="container" style="margin-top: 15px;">
<div class="row">
<div class="two columns push-ten">
<a href="index.php">
<img src="images/logo.png" alt="logo" /></a>
</div>
<div class="ten columns pull-two">
<nav>
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</nav>
</div>
</div>
</div>
Push and pull will correctly order the Menu first and Logo second. Push and pull are ignored on mobile, meaning your logo will stack above the menu on mobile.
Desktop:
[Menu][Logo]
Mobile
[Logo]
[Menu]
Docs:
http://foundation.zurb.com/docs/grid.php

Collapsing 'Non-Link' items in Twitter Bootstrap 3 Responsive Navbar

I have a responsive fixed-top navbar (using Twitter Bootstrap 3) as follows:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header"><img src="/images/citylightslogo.png" alt="logo" id="cllogo"/>
</div>
**<h1 id="topline2">• Tagline1 </h1>
<h1 id="topline3">• Address • Call Anytime! xxx xxx xxxx </h1>
<div id="adspace" >
<h1 id="headline33" class =".visible-xs" >100% Satisfaction Guaranteed! Call us Anytime! </h1>
</div>
<div id="logospace"><img src="/images/ab2.gif" alt="logo" id="alogo2"/><img src="/images/ab2.gif" alt="logo" id="alogo3"/>
</div>**
</div>
</div>
I just want to make sure that I am learning this correctly: Currently, the elements in bold above overflow all over the place (into other rows) when collapsed.
Question: How could I make sure that they are either invisible when collapsed or partially visible in mobile or tablet screens when collapsed?
Is the fact that I am not including those elements in the "navabar-header" class the problem or should I be wrapping them in a separate div to begin with (if so what div?)?
It seems the bootstrap docs are focused on explaining how to make navbar links responsive and I cannot seem to find anything on making non-link content (like headers) responsive as well.
Thanks!
Dont understand the goal entirely but let me take a crack at it... It sounds like you want more than just menu items to collapse...Right? Great! See below
--> http://www.bootply.com/118940
<nav 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>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<div class="col-sm-3 col-md-3">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
everything inside of
class="collapse navbar-collapse"
will collapse...
see it here --> http://www.bootply.com/118940

Resources