I am trying to get the bottom navbar which is inverse and non fixed and non navigation to stretch full width to cover the complete viewport...well in terms of the design effect it is to have a nice footer stretching full width non fixed...
it used to work when I was on an navbar-default navbar-inverse navbar-fixed-bottom role=presentation. I've tried to change div into row, set row before navbar... it is either I loose the full length or either I loose the inverse... each time I'm gaining something I'm loosing something else... Aaarrrggh... I don't know where to look anymore and I don't have enough knowledge to go and mess around with the media attributes... Anyone has a solution? Thanks a bunch... Max
<nav class="navbar-default navbar-inverse" role="presentation">
<div class="row">
<div class="col-md-3">
<ul>
<li><strong>Partner Companies:</strong><br>
Monsoon Restaurant<br>
Kasha Boutique Hotel<br>
Konokono Beach Villas<br>
Livingstone Restaurant<br>
Seyyida Hotel & Spa</li>
<span><a class="glyphicon-copyright-mark"></a>Copyright SERENE TOURS ZNZ 2014</span>
</ul>
</div>
<div class="col-md-3">
<ul>
<li><strong>Office Tanzania:</strong><br>
Kenyatta Shangani<br>
P.O. Box 1370<br>
Stonetown Zanzibar<br>
+255242234402 Tel<br>
+244242234411 Fax<br></li>
</ul>
</div>
<div class="col-md-3">
<ul>
<li><strong>US Office:</strong><br>
250 Gabriel Circle #9<br>
Sapphire Lakes<br>
Naples FL US-34104<br>
+12393008592 Tel<br>
+12393528777 Fax<br></li>
</ul>
</div>
<div class="col-md-3">
<ul>
<li><strong>Follow us:</strong><br>
<img src="_images/youtube30x30.jpg"> You Tube<br>
<span id="tumblr_button_abc123"></span><br>
<img src="http://www.socialmediabuttons.com/images/facebook6.gif" title=""><br>
<img src="_images/instagram.jpg" alt="Instagram"> Instagram</li>
</ul>
</div>
</div>
</nav>
Related
I noticed that when I scroll upwards fast in Safari, the sticky nav jumps around, then I have to scroll slowly again to get it to click back into it's proper place. I'm using Foundation 6. Also, this is a new issue, as everything used to work just fine in Safari, but something must have changed in the past 4 months or so. See below for an example of the issue.
Here's the HTML for the nav bar. I haven't done anything special with the CSS.
<nav class="top-bar-container hide-for-small-only" data-sticky-container>
<div class="sticky sticky-topbar" data-sticky data-options="anchor: page; marginTop: 0; stickyOn: small;">
<div class="top-bar">
<div class="wrap">
<div class="top-bar-left">
<ul class="menu menu-hover-lines" data-magellan>
<li><a class="menu-options" href="home">Home</a></li>
<li><a class="menu-options" href="projects">Projects</a></li>
<li><a class="menu-options" href="articles">Articles</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
The issue only arises in Safari. Chrome, etc. everything works fine. Has anyone else had this problem? Any help is appreciated.
Had the same problem. I added an id to the body tag and then anchored the top container to it.
<body id="the-body">
<div data-sticky-container>
<div data-sticky data-margin-top="0" data-top-anchor="the-body:top" data-stick-on="small">
<div class="top-bar topbar-sticky-shrink" id="top-menu">
<div class="top-bar-title">
NAME
</div>
<div class="top-bar-right">
<ul class="menu" data-magellan>
<li>FIRST</li>
<li>SECOND</li>
<li>THIRD</li>
</ul>
</div>
</div>
</div>
</div>
This question already has answers here:
How to horizontally align ul to center of div?
(5 answers)
Closed 6 years ago.
Edit after duplicate report
Apologies I think the suggested duplicate may actually be a duplicate. I tried it first and it didn't work for me hence a new question. Having looked again with the new suggested answer I realise my issues are probably with the out of the box settings of the tool I am using (codepen.io). I think I probably need to look at this tool instead! (whether its's the tool or the default version of bootstrap I haven't checked yet). Thanks.
I am doing a very noddy little page to try and get some front end know-how. Very basic stuff I think, but I'm struggling to centre a list on my page. Essentially I have plugged in bootstrap and I believe one of these built css classes is adding bullet points to the unordered list which I think is good. When I centre the text though the bullet points go to the left of the page while the text is centred. I thought maybe the answer was to split that section into 3 columns and put my list in the middle column which works to an extent but shifts about when I try different screen sizes (I thought the point of bootstrap was top facilitate handling responsive design!?)
Anyway I wondered if anyone could give me a hint on how to centre my list in a way that it will a) be left justified so that it is along the lines of
Item 1
Item 2
Item 3
but in the centre of the page and b) remain centred regardless of screen sizes ?
This is the rough html. I've tried to cut it down a bit to keep to the essentials but let me know if more information would help. I've tried various css based methods and all have failed but I thought (maybe wrongly!) really the answer ought to be a bootstrap class ? and so have left the example code with my attempted bootstrap attempt. In reality though I'm just curious now to see how it ought to be done so an css answer would be equally well appreciated!
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="well text-center maindiv">
<h1 style="color: green" class="text-primary text-center">The Mighty Diamonds</h1>
<h3 class="text-center">The band that brought joy to the hearts of millions</h3>
<div id="div1" class="well text-center">
<div id="div2">
The Mighty Diamonds were a band from Jamaica</div>
</div>
<h3 class="text-center;">A Brief Biog</h3>
<p class="text-left body-para">[Paragraph text]</p>
<h3>Studio albums</h3>
<div class="container">
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4 text-left">
<ul>
<li><span>1964</span> - Album 1</li>
<li><span>1966</span> - Album 2</li>
<li><span>1967</span> - Authentic Album Vol. 2</li>
<li><span>1996</span> - Greetings from Album 4</li>
<li><span>1998</span> - Ball of Fire</li>
<li><span>2009</span> - From Paris with Love</li>
<li><span>2007</span> - On the Right Track</li>
<li><span>2012</span> - Walk With Me Album</li>
<li><span>2016</span> - Platinum Ska</li>
</ul>
</div>
<div class="col-xs-4"></div>
</div>
</div>
</div>
So I figure that your issue here is that your ul is not centered in container > row > text-left
Add display: inline-block to .container > .row > .text-left > ul to let it take as much width as its contents
Add text-align: center to .container > .row > .text-left to center the ul inside.
Add text-align: left to the ul to justify the list to left.
See demo below:
.container > .row > .text-left {
text-align: center;
}
.container > .row > .text-left > ul {
text-align: left;
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="well text-center maindiv">
<h1 style="color: green" class="text-primary text-center">The Mighty Diamonds</h1>
<h3 class="text-center">The band that brought joy to the hearts of millions</h3>
<div id="div1" class="well text-center">
<div id="div2">
The Mighty Diamonds were a band from Jamaica</div>
</div>
<h3 class="text-center;">A Brief Biog</h3>
<p class="text-left body-para">[Paragraph text]</p>
<h3>Studio albums</h3>
<div class="container">
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4 text-left">
<ul>
<li><span>1964</span> - Album 1</li>
<li><span>1966</span> - Album 2</li>
<li><span>1967</span> - Authentic Album Vol. 2</li>
<li><span>1996</span> - Greetings from Album 4</li>
<li><span>1998</span> - Ball of Fire</li>
<li><span>2009</span> - From Paris with Love</li>
<li><span>2007</span> - On the Right Track</li>
<li><span>2012</span> - Walk With Me Album</li>
<li><span>2016</span> - Platinum Ska</li>
</ul>
</div>
<div class="col-xs-4"></div>
</div>
</div>
</div>
A more simple solution (if flexbox is an option):
.container > .row > .text-left {
display: flex;
justify-content: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="well text-center maindiv">
<h1 style="color: green" class="text-primary text-center">The Mighty Diamonds</h1>
<h3 class="text-center">The band that brought joy to the hearts of millions</h3>
<div id="div1" class="well text-center">
<div id="div2">
The Mighty Diamonds were a band from Jamaica</div>
</div>
<h3 class="text-center;">A Brief Biog</h3>
<p class="text-left body-para">[Paragraph text]</p>
<h3>Studio albums</h3>
<div class="container">
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4 text-left">
<ul>
<li><span>1964</span> - Album 1</li>
<li><span>1966</span> - Album 2</li>
<li><span>1967</span> - Authentic Album Vol. 2</li>
<li><span>1996</span> - Greetings from Album 4</li>
<li><span>1998</span> - Ball of Fire</li>
<li><span>2009</span> - From Paris with Love</li>
<li><span>2007</span> - On the Right Track</li>
<li><span>2012</span> - Walk With Me Album</li>
<li><span>2016</span> - Platinum Ska</li>
</ul>
</div>
<div class="col-xs-4"></div>
</div>
</div>
</div>
I've recently designed a website and have realised that some of the background of the content, when you scroll down is transparent and so the fixed div that is beneath the content displays on IE and Firefox. Please see my website for a live view of the problem. The HTML is below. Please see below an image of my problem as you can see the text "Get In Touch" is being displayed. I want the background of the content to be above this. Please find attached the fiddle.
<body>
<div class="overlay overlay-hugeinc">
<button type=button class=overlay-close></button>
<img src=http://kadeem.london/Image/Transparent-Kadeem-min.png class="fixed-Me scaling">
<nav>
<ul>
<li><a href=http://kadeem.london>Home</a></li>
<li><a href=papers.html>Papers</a></li>
<li><a href=events.html>Events</a></li>
<li><a href=designs.html>Designs</a></li>
</ul>
</nav>
</div>
<div id=trigger-overlay>
<div class=menubutton>
<h3 class=menubuttontext>MENU</h3></div></div>
<div class=high-container>
<div class=global-container>
<div class=Intro-Video>
<div class=video-box>
<div id=video-container>
<video autoplay class=fillWidth>
<source src=Video/Trailer.mp4 type="video/mp4"/>
</video>
<div class=Kadeem-Logo>
<img src=http://kadeem.london/Image/KL-LOGO.png>
</div>
</div>
</div>
</div>
<div class=content-container>
<div class=row>
<div class="border red"></div>
<h1 class=title-role>
I'm Kadeem
</h1>
</div>
<div class=post-container>
<div class=Biographical-Content>
<div class="step out-view"></div>
<br>
<p>I go by the name of <a href=https://www.linkedin.com/pub/kadeem-laurie/57/277/9b5>Kadeem Laurie</a>. I am an events graduate currently developing an events marketing start-up. This website was created from scratch using HTML5, CSS3,jQuery & responsive design. I specialise in event management, digital content, SEO, marketing strategy, branding and front-end web design. <p> Freedom of thought inspires me. I love conceptualising and seeing ideas evolve. I see myself as a marketeer who simply likes to make things look good, branding has thus always been my most favourable aspect of marketing. I studied event management in university and have organised a <a href=events.html> few events</a> of my own. I am currently working as an event organiser at <a href=https://en.wikipedia.org/wiki/Spire_Healthcare>Spire Healthcare</a>. I hope to integrate events within marketing strategy more. I like to ask the <a href=http://stackoverflow.com/users/1923610/kadeem-laurie target=_blank>right questions</a> and find solutions from different perspectives. My academic interests lie in the regions of city branding and <a href=https://www.academia.edu/14690454/The_Commercial_and_Political_Implications_of_Events>events management.</a> <p>My favourite book is <a href=https://en.wikipedia.org/wiki/The_Prince>The Prince</a> by Nicolo Machievelli. My favourite dish is <a href=http://lifestyle.sapo.pt/sabores/receitas/arroz-de-marisco>Arroz De Marisco.</a> This website has been recently created so content is being added concurrently.
<p>
</p>
</div>
</div>
</div>
<div class=other-contain>
<div class=My-Gems>
<div id=effect-6 class="effects clearfix">
<div class=img>
<img src=https://alchetron.com/cdn/zeebra-5e766eb1-964a-49c5-b888-c05effa9354-resize-750.jpeg style=height:100% alt>
<div class=overlay5>
<a class=expand>Bone & Joint Launch</a>
</div>
</div>
<div class=img>
<img src=http://kadeem.london/Image/Money-Matters-Logo.png alt>
<div class=overlay5>
<a href=designs.html class=expand>Money Matters</a>
</div>
</div></div>
</div>
</div>
<div class=eee>
<div class=row>
<section id=activities class=pane>
<div class=pane-content>
<div class=pane-row>
<div class=summary>
<p>POSTS</p>
</div>
</div>
<div class="pane-row d">
<div class=activity-col>
<h4>city branding</h4>
<ul>
<li><a>The Impact of City Branding in The Perceived Image of Cities: The Case of New York City</a></li>
</ul>
<h4>Urban Regeneration</h4>
<ul>
<li>The Role of Events in Urban Regeneration</li>
<li>Hacknified</li>
</ul>
</div>
<div class=activity-col>
<h4>Marketing Strategy</h4>
<ul>
<li>Marketing Strategy: British Airways vs. Air France</li>
<li>The Marketing Strategies of Startup Brands</li>
</ul>
<h4>Events Management</h4>
<ul>
<li>The Political & Commerical Implications of Events</li>
</ul>
</div>
<div class=activity-col>
<h4>Events Marketing</h4>
<ul>
<li>Marketing Events Online</li>
<li>The Role of City Branding in Urban Tourism</li>
</ul>
<h4>Digital Marketing</h4>
<ul>
<li>Digital Content</li>
<li>Post Purchase Behaviour of Hotel Guests</li>
</ul>
</div>
</div>
</div>
</section>
<footer class=goodbye>
<div class="border red4"></div>
<div class=block>
<div class=centered>
<h2 class=text-go>GET IN TOUCH</h2>
</div>
</div>
</footer>
<footer class=goodbye4>
<div class=block6>
<div class=centered6>
If you would like to find out more about me you can <a href=mailto:kadeemlaurie#gmail.com>message me</a>.
</div>
</div>
</footer>
<footer class=goodbye5>
<div class=container1>
<footer class=footer>
<div class=container1>
<div class=flex-item>© 2015 KADEEM</div>
</div>
</footer>
</div>
</div>
You have an empty P tag inside your post-container that is causing this gap. Remove it and it will fix everything accross all browsers. Also, once the empty tag is removed, you could give the last P element (with the "My favourite book" text) a padding-bottom of 45px to push the container down correctly.
<div class="post-container">
<div class="Biographical-Content hidden visible animated fadeInUpBig">
<div style="height: 407px;" class="step out-view active"></div>
<br>
<p>I go by the name of [...]</p>
<p> Freedom of thought [...]</p>
<p>My favourite book [...]</p>
<p></p> --> Empty P tag
</div>
</div>
If for any reason you can't avoid having that "extra" <p> in your html; add this to your css
p:last-child {
display: none;
}
In the below code unordered list bullet symbols are not displaying. Can any one help me.
expected output:
Smart class (Digital Technology) as a part of classroom teaching.
html
<section class="container">
<div class="row">
<!-- main content -->
<section class="col-sm-8 maincontent">
<h3>Our Facilities</h3>
<img src="assets/images/about.jpg" alt="" class="img-rounded pull-right" width="300" />
<ul>
<li>Smart class (Digital Technology) as a part of classroom teaching.</li>
<li>Karate Classes</li>
<li>Well equipped, Compute Lab and Science Lab.</li>
<li>CET classes,</li>
<li>Sports Academy.</li>
<li>Eco and Environment Club,Adventure Club.</li>
</ul>
</div>
</div>
</section>
</div>
</section>
Check your CSS. Make sure it contains something similar to ul {list-style-type: circle;}.
For other style types, see the reference.
I need to know how to create a navigation bar with Unsemantic framework (or 960gs).
My menu structure is
<div>
<ul>
<li></li>
</ul>
</div>.
I have tried so much, but still can't find out the problem.
EDIT
I use wordpress.So it creates navigation menu. the eventual code rendered in the browser is as follows:
<nav role="navigation" class="clearfix black grid-100 grid-parent mobile-grid-100 mar-top10 mar-bottom10" id="wp_nav_menu_wrapper">
<div class="grid-container">
<div class="menu">
<ul>
<li class="page_item page-item-2">
ُSample Page
</li>
<li class="page_item page-item-5">ُSample Page 2
</li>
</ul>
</div>
</div>
</nav>
While my Wordpress markup is as follows:
<div class='grid-100 height-auto black-gray-bg font-tahoma'>
<nav role='navigation' class='clearfix black grid-100 grid-parent mobile-grid-100 mar-top10 mar-bottom10' id='wp_nav_menu_wrapper'>
<div class='grid-container'>
<?php
wp_nav_menu();
?>
</div>
</nav>
</div>
The grid-container class is for the outer container and the grid-parent class for inner or nested containers. In your code you have this backwards.
The grid-parent class lets you align self-contained grids with normal grid items. The container holds all of the grid items. So the grid-parent is just an indicator that the or whatever will contain further items related to its scale and ordering on the page.
You can use this structure, or similar:
<nav class="grid-container">
<ul class="grid-100 grid-parent">
<li class="grid-25">...</li>
<li class="grid-25">...</li>
<li class="grid-25">...</li>
<li class="grid-25">...</li>
</ul>
</nav>