Bootstrap 3 Menu Redesign and Link questions

HTML & CSS
1

I am really liking Bootstrap 3 and it looks like Sitepoint got a Bootstrap redesign too? Is this correct?

Anyways, I am looking to have my Bootstrap fixed topnav menu to be bigger with a logo and styled links on desktop view and smaller with a resized logo on mobile view . Can this be done?

Also, I looked at the source code of Bootstrap’s website and they use “./” instead of “/” for sourcing. “./” for example will be the link to the homepage and I’ve never seen this before. Any ideas why they use the period before the slash and if there are benefits to doing so?

Thanks!

2

I think Sitepoint used foundation.

Anyways, I am looking to have my Bootstrap fixed topnav menu to be bigger with a logo and styled links on desktop view and smaller with a resized logo on mobile view . Can this be done?

It would be up to you to over-ride the default menu (assuming you are using the default menus) with your own css files. You can change the height to what ever you want in the normal way. Or just find a template closer to your design and modify that.

Or do you have a demo page up already to look at?

Also, I looked at the source code of Bootstrap’s website and they use “./” instead of “/” for sourcing. “./” for example will be the link to the homepage and I’ve never seen this before. Any ideas why they use the period before the slash and if there are benefits to doing so?

Do you have an example?

/ = root relative
./ = start at the current directory
…/ = up one level relative to current directory
…/…/ = up two levels relative to current directory

and so on.

3

Thanks, Paul O’B

I’m looking to skin my main navigation to be something similar to this:
http://www.belancio.com/brands

Notice that for the mobile dropdown, it’s not the same colour as the lighter gray desktop navigation. I’m looking at the code and Bootstrap 3 docs but can’t find any mention of how to do that. It seems like the examples on Bootstrap 3 components page are using the same colours for desktop / mobile navigation. (With the same rollover effects on both too)

Any idea how this is achieved?

4

Hi,

The way I did it was simply to use the standard bootstrap and then modify the code to suit. If you close the window until the dropdown appears then you can highlight the menu in Firebug (other developer tools are available) and see what styles are being applied and then just over-ride them in your custom stylesheet (don’t touch the bootstrap files).

I use a program called CSS terminal to test out styles on the fly and once happy just copy and paste it into the real stylesheet. For example install CSS terminal and then just paste the following in the CSS terminal window of the site you linked to.


#header .mobile-menu {background:red}
#header .mobile-menu li{background:blue}
#header .mobile-menu .menu-down li a{display:block}
#header .mobile-menu .menu-down li a:hover{background:green}

Then go into the mobile with and the colours are all changed. It doesn’t take long to customise a menu to your own designs that way.

5

I don’t have these id’s or classes in my HTML markup (#header, .mobile-menu). If I create these will I need to have duplicate navigation markup for a mobile menu as well as a desktop menu in order to skin them separately?

Thanks,

(This is the code I am working with)

      <!-- Fixed navbar -->
      <nav class="navbar navbar-inverse" role="navigation">
        <div class="container">
          <div class="navbar-header" role="navigation">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/"><img src="/assets/images/logo.png"></a>
          </div>
          <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right" id="">
              <li<?php if($section=='') { echo ' class="active"'; } ?>><a href="/">Home</a></li>
              <li<?php if($section=='portfolio') { echo ' class="active"'; } ?>><a href="/portfolio">Portfolio</a></li>
              <li<?php if($section=='services') { echo ' class="active"'; } ?>><a href="/services">Services</a></li>
              <li<?php if($section=='about') { echo ' class="active"'; } ?>><a href="/about">About</a></li>
              <li<?php if($section=='contact') { echo ' class="active"'; } ?>><a href="/contact">Contact</a></li>
            </ul>
          </div><!-- /.nav-collapse -->
        </div>
      </nav>
      <!-- /Fixed navbar -->
6

You misunderstood me a little.:slight_smile: The code I posted refers to the site you posted as an example. I was just showing how relatively easy it is to re-style an existing menu (within limits)

(This is the code I am working with)

      <!-- Fixed navbar -->
      <nav class="navbar navbar-inverse" role="navigation">
        <div class="container">
          <div class="navbar-header" role="navigation">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/"><img src="/assets/images/logo.png"></a>
          </div>
          <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right" id="">
              <li<?php if($section=='') { echo ' class="active"'; } ?>><a href="/">Home</a></li>
              <li<?php if($section=='portfolio') { echo ' class="active"'; } ?>><a href="/portfolio">Portfolio</a></li>
              <li<?php if($section=='services') { echo ' class="active"'; } ?>><a href="/services">Services</a></li>
              <li<?php if($section=='about') { echo ' class="active"'; } ?>><a href="/about">About</a></li>
              <li<?php if($section=='contact') { echo ' class="active"'; } ?>><a href="/contact">Contact</a></li>
            </ul>
          </div><!-- /.nav-collapse -->
        </div>
      </nav>
      <!-- /Fixed navbar -->

Just use the classes from your own menu and over-ride the default with the css in your own custom css file. If you do as I mention above you can make changes and see the result and work out what needs to be changed at each stage as you may need to cancel out styles that you don’t need.

Or alternatively create your own menu but then you will have to start from scratch, apply your own media queries and dropdown styles, which then defeats some of the reasons for using bootstrap in the first place.:slight_smile:

I can’t offer specific advice without seeing your page and the design you need to repliate.

7

@media max-width is the CSS3 attribute that I was looking for. I can now skin my mobile menu using the same HTML markup. :slight_smile:
Thanks

8

And sorry this may sound like a silly question, but is it possible make a div with a background image responsive using Bootstrap?

I’m using a class on my H1 to replace it with an background image using some fancy Photoshop effects on the text. I don’t think I should be using pixels for the width and height. I see the pre-built “img-responsive” class in Bootstrap 3 but it only seems to work on <img>'s. Any idea if responsive can be done for div background-images too?

Here is the HTML:
<h1 class=“homepage hide-text”>Welcome</h1>

And here is the CSS:
h1.homepage {background:url(…/images/h1-homepage.png);width:350px;height:55px;}

/* Better than text-indent -9999px for hiding text */
.hide-text {text-indent:100%;white-space:nowrap;overflow:hidden;}

9

Have a look at background-size which should do what you want.

You can see the methods here.

10

Thanks! So in the methods article that you linked to I scrolled down to the bit about “Adding a background image” and utilized their example as follows:

<h1 class="column hide-text img-center">Beautiful Websites
  <figure class="fixedratio"></figure>
</h1>

.img-center {margin: 0 auto;}

.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

h1.column {
  /* The background image must be 477px wide */
  max-width: 477px;
}


figure.fixedratio {
  padding-top: 11.530398322851%;  /* 55px/477px = 0.11530398322851 */

  background-image: url(../images/h1-homepage.png);
  background-size: cover;
  -moz-background-size: cover;  /* Firefox 3.6 */
  background-position: center;  /* Internet Explorer 7/8 */
}

Am I correct in assuming this is the correct HTML markup for responsive background images on H1’s?

My only quarrel with this code is that I don’t like using a <figure> tag inside my H1. Any ideas if there is a workaround for this?

Ideally, this would be my favourite type of HTML markup to use:

<h1 class="homepage hide-text">Beautiful Websites</h1>

Something easy and accessible (H1’s can be helpful for SEO) but also hides the text and replaces it with a responsive background image. Thanks!

11

That looks correct but just use a span if you don’t like the code in the example. An empty span will do no harm and you can still do your usual image replacement technique.

If it’s not working put up an example and we’ll try to debug further.

12

Hmmm, the image isn’t showing up at all when I use a span instead of figure. Here is the code:

<h1 class="column hide-text img-center">Beautiful Websites
  <span class="fixedratio"></span>
</h1>

.img-center {margin: 0 auto;}

.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

h1.column {
  /* The background image must be 477px wide */
  max-width: 477px;
}


span.fixedratio {
  padding-top: 11.530398322851%;  /* 55px/477px = 0.11530398322851 */

  background-image: url(../images/h1-homepage.png);
  background-size: cover;
  -moz-background-size: cover;  /* Firefox 3.6 */
  background-position: center;  /* Internet Explorer 7/8 */
}
13

Hi,

Do this as well:


span.fixedratio {display:block}



<h1 class="column hide-text img-center"><span class="fixedratio">Beautiful Websites</span> </h1>
14

Thanks, this works too!