navbar brand image

Bootstrap Studio Help
1

Hi, how do i insert navbar brand image and remove brand name right way?

Thanks in advance!

2

Good question! The way I ended-up doing it is as follows:

  1. Drag image item to beginning of nav-bar brand text
  2. Set image source
  3. Set image height
  4. Add the following to your css: a.navbar-brand.navbar-link { height: 100%; }
  5. Delete brand text

I'm sure there must be a better way, but that's worked for me so far.

3

Thank you for helping out, @simonl! This is the correct way to do it that is also used in the Bootstrap docs.

4

You're welcome!

5

Hi. Help me understand. Where and how do you do instruction steps #2-4? Thank you.

6

Looks at the first video here https://bootstrapstudio.io/tutorials/

The how to build a page shows how to do this

7

in a desing i just did step 4 worked better as

a.navbar-brand {
  padding:0;
}

and i used a 54px height logo, but i'd say you get the best result (no resizing) with a 50px height logo.

8

Hi,

I am trying to put a centered Navbar to my web site using Bootstrap Studio with NavBar component. Navbar should be centered and with this format: [Link1][Link2][BrandImage][Link3][Link4][Link5] The problem is I could not place to center or even change the location of NavBar Brand Image. Do you have any solution for this?

By the way, the first problem which is centering the whole navbar(without Brand Image - that I have closed over Bootstrap Studio configurations) has been solved by editing css mentioned in this post "https://bootstrapstudio.io/forums/topic/center-navbar/#post-3166". So now I have a navbar with links(nav) centered but brand image is at the left corner.

Also I need this to be responsive, collapse once window size decreased.

Thanks,

9

Hi hoper,

Does this video help in what you are wanting to achieve

Navbar Centered Items with Brand

10

Hi Windy,

Thanks a lot for a video, it is very helpful. May be I need to give more explanation. Center and image part is OK but once it is collapsed navbar might get shape as below, brand image to be displayed in the middle(center) and collapse button for the nav links to be placed at right hand side.

...[Brand image]...[collapsed link button]

Thanks,

11

Hi hoper,

Following on from the other video, this one arranges the links when the screen size is small enough for the hamburger menu to appear

Navbar2