CODEWITHSUNDEEP
htmlcsstwitter-bootstrapnavbar
geeky_monster
geeky_monster

Reputation: 8792

Difficulty customizing Bootstrap navbar for responsiveness

I wish to create a navbar like the below. I decided to use Bootstrap as its easy to create a responsive navbar using Bootstrap.

navbar

I put in my own custom CSS so that the background is transparent, links are white in color etc and the menu links lie at the center.

You can have a look here - http://107.167.189.78/codeigniter/index.php/web/

Problems come when I resize the screen. enter image description here

enter image description here

The problems are -

1) When mobile,the navbar is not visible ( since I made it transparent )

2) When mobile - the navbar button appears in the middle( I wish the button to come on exptreme right)

Upvotes: 1

Views: 285

Answers (3)

Mohamed Salem Lamiri
Mohamed Salem Lamiri

Reputation: 6077

The following code will make your navbar button appears on the extreme right on tablet portrait/mobile display and set your background color to pink instead of using your navbar background image ..

@media all and (max-width: 768px) {
  .navbar.mynavbar{
     background: #db1d94 none repeat-x scroll 0 0;
     width: 100%;
     z-index: 9999;
  }
}

This should fix your problem I already tested it.

It will looks something like this : (on tablet portrait/mobile) enter image description here

Note: you have to get rid of the white border once you show up again the background ...

Upvotes: 1

Andy Mardell
Andy Mardell

Reputation: 1191

You have some strange issues with your header image (the pink one). It exists in your HTML:

Img tag And also exists in your CSS as a background image for .myheader

This should get you started:

  • The img tag in the HTML (above) is causing the nav to misbehave. Delete it.
  • A lot of your problems lie with .mynavbar and position:absolute. Remove position:absolute and all you have to sort now is the pink background image stretching in weird ways (caused by background-size: 100% 100%; on .myheader)

Hope that helps.

Upvotes: 0

Lansana Camara
Lansana Camara

Reputation: 9873

For number 1. you answered your own question. You say they become transparent because you made them that way. So undo that.

For number 2. You need to use either media queries or Bootstraps built-in classes. You can also target the specific selectors and use text-align:right or float: right, but be weary of floating as you will need to clear them.

Upvotes: 0

Related Questions