Avoiding being "boxed in" by Bootstrap when implementing mobile headers

by in Developer Notes Internet Marketing

When we were asked to do a re-design for the The Concord Advisory Group Ltd. we used the Bootstrap toolkit, which provides a framework of pre-made components for building websites and Web User Interfaces. We like Bootstrap because it is responsive, mobile-friendly, works with LESS variables, and has a bunch of helper classes. It is also generally easy to use and has a really clean layout.

For this website we decided not to go with a mobile first approach because we already had a design concept for the desktop homepage and header. With the desktop header we wanted to do things a little differently than how Bootstrap provides out of the box.

Concord Advisory Group full width header

 

In the example above we wanted the logo to float on top of the header and banner image. We achieved this effect by adding new layers to the bootstrap header and positioning them. We absolutely positioned the logo to the left side and added another layer to give the margin to the title and navigation layers. We used media queries to shrink the logo size and adjust the margin as the screen size reduces in size.

 

Concord Advisory Group mobile header

 

When we first created the mobile header it was very cluttered with the logo, tagline, search bar and social media links. We used media queries to replace the logo with the company name in text on the mobile design. Media queries also remove the logo, tagline, search bar and social media links. The headlines, titles and navigation sizes are also resize based on the screen width.

Although bootstrap and other frameworks are great tools to help build a website sometimes it helps to use a custom solution to meet the needs of our clients. If you are interested in or need help with your website design, feel free to contact us.

Leave a Reply

You must be logged in to post a comment.

About Leon Rainbow

Leon is primary lead for Inforest Communications graphic and Web design services. He has over ten years experience in Web design and development and is proficient working with open­source CMS systems. He holds an associates degree in Computer Graphics from Mercer County Community College. Leon Rainbow is also a well known artist in Mercer County who creatively combines graffiti, street art and other artistic forms into innovative projects and events. He reaches out to wide audience, from galleries to the walls of inner cities. Leon curates two annual art festivals in New Jersey for area painters and the community as well as dedicating his civic duty to teaching after­school art programs in Trenton and Princeton, NJ.