SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Addict revlimiter's Avatar
    Join Date
    Sep 2005
    Location
    British Columbia, Canada
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Bootstrap 3 Menu Redesign and Link questions

    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!
    "To make an apple pie from scratch,
    you must first create the universe.
    -Carl Sagan

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by revlimiter View Post
    I am really liking Bootstrap 3 and it looks like Sitepoint got a Bootstrap redesign too? Is this correct?
    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. #3
    SitePoint Addict revlimiter's Avatar
    Join Date
    Sep 2005
    Location
    British Columbia, Canada
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?
    "To make an apple pie from scratch,
    you must first create the universe.
    -Carl Sagan

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    #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. #5
    SitePoint Addict revlimiter's Avatar
    Join Date
    Sep 2005
    Location
    British Columbia, Canada
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.

    Code:
    #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.
    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)
    HTML Code:
          <!-- 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 -->
    "To make an apple pie from scratch,
    you must first create the universe.
    -Carl Sagan

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by revlimiter View Post
    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?
    You misunderstood me a little. 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)
    HTML Code:
          <!-- 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.

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

  7. #7
    SitePoint Addict revlimiter's Avatar
    Join Date
    Sep 2005
    Location
    British Columbia, Canada
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @media max-width is the CSS3 attribute that I was looking for. I can now skin my mobile menu using the same HTML markup.
    Thanks
    "To make an apple pie from scratch,
    you must first create the universe.
    -Carl Sagan

  8. #8
    SitePoint Addict revlimiter's Avatar
    Join Date
    Sep 2005
    Location
    British Columbia, Canada
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;}
    "To make an apple pie from scratch,
    you must first create the universe.
    -Carl Sagan

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Have a look at background-size which should do what you want.

    You can see the methods here.

  10. #10
    SitePoint Addict revlimiter's Avatar
    Join Date
    Sep 2005
    Location
    British Columbia, Canada
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Have a look at background-size which should do what you want.

    You can see the methods here.
    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:

    HTML Code:
    <h1 class="column hide-text img-center">Beautiful Websites
      <figure class="fixedratio"></figure>
    </h1>
    Code:
    .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:

    HTML Code:
    <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!
    "To make an apple pie from scratch,
    you must first create the universe.
    -Carl Sagan

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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. #12
    SitePoint Addict revlimiter's Avatar
    Join Date
    Sep 2005
    Location
    British Columbia, Canada
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.
    Hmmm, the image isn't showing up at all when I use a span instead of figure. Here is the code:

    HTML Code:
    <h1 class="column hide-text img-center">Beautiful Websites
      <span class="fixedratio"></span>
    </h1>
    Code:
    .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 */
    }
    "To make an apple pie from scratch,
    you must first create the universe.
    -Carl Sagan

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Do this as well:

    Code:
    span.fixedratio {display:block}
    Code:
    <h1 class="column hide-text img-center"><span class="fixedratio">Beautiful Websites</span> </h1>

  14. #14
    SitePoint Addict revlimiter's Avatar
    Join Date
    Sep 2005
    Location
    British Columbia, Canada
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    Do this as well:

    Code:
    span.fixedratio {display:block}
    Code:
    <h1 class="column hide-text img-center"><span class="fixedratio">Beautiful Websites</span> </h1>
    Thanks, this works too!
    "To make an apple pie from scratch,
    you must first create the universe.
    -Carl Sagan


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •