Tips and Snips: Creative Website Hacks for Creative People
ImageandAspect
About
Work Examples
Contact
Privacy
Terms
Subscribe
Tips and Snips: Creative Website Hacks for Creative People
  • ImageandAspect
  • About
  • Work Examples
  • Contact
  • Privacy
  • Terms
  • Subscribe
Browsing Category
Bootstrap
Bootstrap•CSS•HTML

The correct order for using Bootstrap tags

bootstrap logo
April 4, 2022 by Diane Metcalf, M.S.I.T. No Comments

If you notice that your page isn’t displaying properly; like maybe Bootstrap is using its’ default styles
instead of your custom css, or maybe your drop-down menu isn’t working, it could be that you need to
check the order of your Bootstrap tags.

The order of the tags is very important for your page to look and work like you want it to.

Check the head and make sure you have the meta tags correct. (The 3rd tag is necessary to display the page on mobile devices.)

<head>

<meta charset=”utf-8″>
<meta content=”IE=edge” http-equiv=”X-UA-Compatible”>
<meta content=”width=device-width, initial-scale=1″ name=”viewport”>

The above 3 meta tags must come first in the head; the other head content comes after them.

<title>Page Title Here</title>

Next is the Bootstrap core css:
<link href=”css/bootstrap.css” rel=”stylesheet”> OR
<link href=”css/bootstrap.min.css” rel=”stylesheet”>

Your own style sheets come next
<link href=”css/mystyle.css” rel=”stylesheet” />
</head>

The Bootstrap Core JavaScript files (jquery.min.js and bootstrap.js) are at the end, right before the closing body tag, so the pages will load faster.

Which Bootstrap css version should you use? It depends whether you want to be able to read it or not. Bootstrap.min.css is a mini version of bootstrap.css. All of the white space and other extra characters have been removed, to decrease the file size. This version is usually used in production. When you’re developing, it’s helpful to use the regular version because it’s legible.

Read more at https://getbootstrap.com/docs/3.3/getting-started/

Questions? Contact me:

[email protected]

or

My Contact Page

Other articles you might like:

-How your personal brand makes the difference

-Using images: Tips to improve your SEO rankings

-Use a customer thank-you page to avoid missed opportunities

 

About the author

diane-author-300x181 The correct order for using Bootstrap tags

I developed Image and Aspect because I believe that professionals need to have an impactful web presence. One that showcases their unique talents, skills, and abilities as well as their values and style. A presence that focuses on social engagement and connection.

I’m passionate about what I do; I like helping fellow humans, I like having all kinds of social connection with others, and I want to give back, to make the world a better place.

I do much of the designing and coding myself, and I also have a wonderful network of professionals that may contribute as well; photographers, copywriters, branding experts.

I love designing and coding beautiful, elegant and responsive web creations. I ALSO teach and help others who want to learn how to do it themselves.

‘Tips and Snips’ is my blog, and it’s full of information and inspiration to help transform any online persona from “meh” to AMAZING! Sign-up HERE to get blog posts right to your in-box every Friday! I write about Design, Marketing, Search Engine Optimization, Branding, Vlogging, Color Theory, HTML5, CSS3, Bootstrap, WordPress, Social Media…anything you’d want to know to get yourself noticed online.

Visit Image and Aspect to learn more about your web presence options

Diane M. Metcalf, M.S.

Read more

Reading time: 2 min
Bootstrap

How to make a hover-able drop-down menu

photo of a hoverable and clickable bootstrap dropdown navigation item
February 23, 2022 by Diane Metcalf, M.S.I.T. No Comments

Recently a client requested a change to the “SHOP” link on her ecommerce site. (When clicked, a dropdown menu appeared.) She wanted the SHOP link to do two things:

  1. when a customer HOVERS on it, a dropdown menu will appear
  2. when the SHOP link is CLICKED, the Home page opens

Here’s how I did it, using Bootstrap:

Create the main Navbar using Bootstrap 3 (Framework  HERE)

<nav class=”navbar navbar-default”>
<div class=”container-fluid”>
<div class=”collapse navbar-collapse” id=”bs-example-navbar-collapse-1″>

<ul class=”nav navbar-nav”>
<li><a href=”URL for Link 1 here”>Link 1 Name</a></li>
<li><a href=”URL for Link 2 here”>Link 2 Name</a></li>
<li><a href=”URL for Link 3 here”>Link 3 Name</a></li>
<li><a href=”URL for Link 4 here”>Link 4 Name</a></li>

To add a hoverable  link that opens a dropdown menu, you will create that link next. Remember to DISABLE the dropdown-toggle to make the link hoverable.  The HREF will open the new page when the link is clicked.

We’re still inside of the main navbar ul.

<li class=”dropdown”>
<a class=”dropdown-toggle disabled” data-toggle=”dropdown” role=”button” aria-haspopup=”true” aria-expanded=”false” href=”URL to open a different page when clicked“>HOVER-ABLE/CLICKABLE LINK NAME </a>

Add another ul class that will contain the dropdown menu.

<ul class=”dropdown-menu”>
<li>
<a href=”URL here”>Link A Name</a>
</li>

<li>
<a href=”URL here”>Link B Name</a>
</li>

<li>
<a href=”URL here”>Link C Name</a>
</li>

</ul><!–dropdown ul menu–>
</li><!– dropdown li menu–>
</ul <!–navbar ul–>
</div><!– /navbar-collapse –>
</div><!– /container-fluid –>
</nav>

Make sure the bootstrap CSS link is in the document head, and jquery.min.js and bootstrap.js are at the end of your document, right before </body>, so the pages load faster. If the dropdown doesn’t work,  it’s usually because the .js scripts are missing or incorrect.

Questions? Contact me:

[email protected]

or

My Contact Page

Other articles you might like:

-How your personal brand makes the difference

-Using images: Tips to improve your SEO rankings

-10 Things to Do After Creating Your Website

 

About the author

diane-author-300x181 How to make a hover-able drop-down menu

I developed Image and Aspect because I believe that professionals need to have an impactful web presence. One that showcases their unique talents, skills, and abilities as well as their values and style. A presence that focuses on social engagement and connection.

I’m passionate about what I do; I like helping fellow humans, I like having all kinds of social connection with others, and I want to give back, to make the world a better place.

I do much of the designing and coding myself, and I also have a wonderful network of professionals that may contribute as well; photographers, copywriters, branding experts.

I love designing and coding beautiful, elegant and responsive web creations. I ALSO teach and help others who want to learn how to do it themselves.

‘Tips and Snips’ is my blog, and it’s full of information and inspiration to help transform any online persona from “meh” to AMAZING! Sign-up HERE to get blog posts right to your in-box every Friday! I write about Design, Marketing, Search Engine Optimization, Branding, Vlogging, Color Theory, HTML5, CSS3, Bootstrap, WordPress, Social Media…anything you’d want to know to get yourself noticed online.

Visit Image and Aspect to learn more about your web presence options

Diane M. Metcalf, M.S.

Read more

Reading time: 3 min
Bootstrap•CSS

Rethinking the mobile Hamburger Menu

Photo of 2 kinds of small device hamburger menus
January 27, 2021 by Diane Metcalf, M.S.I.T. No Comments

The hamburger menu is an aesthetic that was primarily developed to display web-pages on small devices to keep them “cleaner-looking”. While it provides an easy, fast navigation solution that is consistent across mobile sites, the hamburger menu still uses valuable space. Especially on very small screens.

Here’s a Bootstrap tutorial to change the look and location of the hamburger menu to get it out of the way:

I’m using my own site, Imageandaspect.com, as an example:

Bootstrap Navigation

I’m using the default bootstrap navigation code found here

<nav class=”navbar navbar-default navbar-custom navbar-fixed-top”>
<div class=”container-fluid”>

The Brand and toggle items get grouped together here for better mobile display:
<div class=”navbar-header page-scroll”>

<button class=”navbar-toggle” type=”button” data-target=”#bs-example-navbar-collapse-1″ data-toggle=”collapse”>

My “hamburger menu” will be a rectangle that displays the word “Menu”:
span class=”sr-only”>Toggle navigation/span>Menu/button>

Here’s where I add my brand, Imageandaspect, to the upper left of the navigation bar:
a class=”navbar-brand” href=”index.html”>IMAGEANDASPECT/a>/div>

Now, collect the nav links, forms, and other content for collapsing/toggling:

div id=”bs-example-navbar-collapse-1” class=”collapse navbar-collapse”>

Add the navigation links to an un-ordered list:

<ul class=”nav navbar-nav navbar-right”>
<li><a href=”philosophy.html”>Philosophy</a></li>
<li><a href=”concierge.html”>Personal Services</a></li>
<li><a href=”products.html”>Products</a> </li>
<li><a href=”gallery.html”>Gallery</a></li>
<li><a href=”blog.html”>Blog</a> </li>
<li><a href=”contact.html”>Contact</a></li>
</ul>

Notice that the data-target “#bs-example-navbar-collapse-1 and the div id=”bs-example-navbar-collapse-1 must be exactly the same name. You can change the default name, but it must match in both places or the collapsed menu will not open.

The CSS:

I’m using Bootstrap 3 and the bootstrap CSS available here: https://getbootstrap.com/docs/3.3/css/

Customization:

Make customizations in your own CSS document. Not a good idea to change the Bootstrap CSS.

To change the text color to Aqua:

.navbar-custom .navbar-header .navbar-toggle {
color: #57BBBF;
font-weight: normal;
font-size: .4em;
}

NAVBAR BRAND TEXT SIZE AND COLOR CUSTOMIZATION:

.navbar-custom .navbar-brand {
font-weight: normal;
font-size: 1.em;
color: #FFF;
}

Makes nav bar transparent on bigger screens, displaying white nav links:

.navbar-default {
background-color: transparent;
color: #FFFFFF;
}

Use a media query to remove the transparent background and change it to a color for easier viewing on smaller screens:

@media screen and (max-width:1024px) {

.nav li a {
color: #57BBBF;
background-color: #002633 !important;
}

}

Make sure to add the bootstrap scripts jquery.min.js and bootstrap.js to make the collapsed toggle nav work correctly. I add it right before the closing body tag, for faster page loading.

(See my website: Imageandaspect.com as an example of how the navigation displays differently on different sized devices)

Questions?

[email protected]

My Contact Page

Other articles you might like:

-Using images: Tips to improve your SEO rankings

-6 Tips to Make Your Blog Post SEO Friendly

-Use a customer thank-you page to avoid missed opportunities

 

About the author

diane-author-300x181 Rethinking the mobile Hamburger Menu

I developed Image and Aspect because I believe that professionals need to have an impactful web presence. One that showcases their unique talents, skills, and abilities as well as their values and style. A presence that focuses on social engagement and connection.

I’m passionate about what I do; I like helping fellow humans, I like having all kinds of social connection with others, and I want to give back, to make the world a better place.

I do much of the designing and coding myself, and I also have a wonderful network of professionals that may contribute as well; photographers, copywriters, branding experts.

I love designing and coding beautiful, elegant and responsive web creations. I ALSO teach and help others who want to learn how to do it themselves.

‘Tips and Snips’ is my blog, and it’s full of information and inspiration to help transform any online persona from “meh” to AMAZING! Sign-up HERE to get blog posts right to your in-box every Friday! I write about Design, Marketing, Search Engine Optimization, Branding, Vlogging, Color Theory, HTML5, CSS3, Bootstrap, WordPress, Social Media…anything you’d want to know to get yourself noticed online.

Visit Image and Aspect to learn more about your web presence options

Diane M. Metcalf, M.S.

Read more

Reading time: 3 min

Find Topics

 Image and Aspect is a solution-based web presence development service for creatives, entrepreneurs and solopreneurs. We create impactful online presences that showcase your talents, skills, values & style, while focusing on influencing, engagement & connection.

 

It’s a collaborative process; we use streamlined project-management & communications tools so you’ll always know what’s happening with your project. And by adding personalized service, you get  one-on-one support. We want you to feel equipped, educated & empowered to ask questions & make decisions about your web presence & web platform.

 

Tips and Snips was born from the desire to give back; to support anyone who has an interest in learning the art and science of  web design and coding.

 

Thanks for your interest!

~Diane Metcalf, MS

Image and Aspect logo

Connect with me on Twitter!

Follow @MetcalfDiane

Categories

  • bootstrap
  • CSS
  • Design
  • Entrepreneurs and Creatives
  • HTML
  • Marketing
  • security
  • SEO
  • Thoughts
  • WordPress

Recent Posts

  • 6 Tips to make your Blog Post SEO Friendly May 6, 2022
  • The correct order for using Bootstrap tags April 4, 2022
  • Basic HTML (Hypertext Markup Language) Vocabulary Rules March 4, 2022
  • How to make a hover-able drop-down menu February 23, 2022
  • 10 things to do after creating your site January 8, 2022

Older Posts

  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020

Tags

  • bootstrap
  • CSS
  • Design
  • Entrepreneurs and Creatives
  • HTML
  • Marketing
  • security
  • SEO
  • Thoughts
  • WordPress

Image and Aspect on Instagram

To see the Instagram feed you need to add your own API Token to the Instagram Options page of our plugin.
Oops, something is wrong. Instagram feed not loaded

recent posts

  • 6 Tips to make your Blog Post SEO Friendly
  • The correct order for using Bootstrap tags
  • Basic HTML (Hypertext Markup Language) Vocabulary Rules
  • How to make a hover-able drop-down menu
  • 10 things to do after creating your site

ImageAndAspect.com © 2021 Designed by ImageandAspect