Center navbar

Forums Help and How To Center navbar

This topic contains 12 replies, has 6 voices, and was last updated by  Ajiprasa 2 months ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #3149
    mbaruschke
    Member

    Hello,

    give a component with center Navbar?

    Greets.

    #3161
    Chris Hackwood
    Member
    Valued

    What do you require to be centered?

    Your thread is pretty vague

    #3163
    mbaruschke
    Member

    i want to make a center Navbar on the middle of the page.

    #3164
    Chris Hackwood
    Member
    Valued

    Ok why not write some css to centre align the navbar.

    Do you want the brand name centred or just the links? You could do this within the app easily already.

    #3165
    mbaruschke
    Member

    no i think, give a ready component 🙂

    a another question, can i change the main font ? i have a lock for the editor and i cant edit, when i overwirte the style then Bootstrapstudio dont show it.

    #3166
    marrco
    Member
    Valued

    to center links you need to change this part of the locked default Bootstrap CSS:;

    @media (min-width:768px) {
      .navbar-nav {
        float:left;
        margin:0;
      }
    }
    

    so in ‘styles’ pane create a new user.css style and paste this:

    @media (min-width: 768px) {
        .navbar .navbar-nav {
            display: inline-block;
            float: none;
            vertical-align: top;
        }
    
        .navbar .navbar-collapse {
            text-align: center;
        }
    }
    
    #3168
    Chris Hackwood
    Member
    Valued

    you can import google fonts to change the default fonts being used.

    Marrco has supplied the answer to what you need to do here to solve your issue.

    to use this app to its best potential it does require a little bit CSS and HTML knowledge

    #3182
    mbaruschke
    Member

    i can very good CSS and HTML, i cant edit the main code, this is locked! To change main font.
    Sorry i dont export and change on brackets and again again again – thats bad!

    i want change font on Bootstrap Studio to live see, feauteres , cant change the font on Bootstrap Studid :/

    Sorry for my bad englisch

    #3183
    Jo
    Member

    To change the font all you have to do is duplicate the class/id that you are wanting to change and then alter the attributes you want to be different (this is for anything you want to change in the default locked BS files).

    To duplicate a class go to the right side of the class name in the Styles window, above the file name that the style is located in and you’ll see the vertical set of dots there. Click that and it will give you a dropdown menu. Choose duplicate and be sure to edit the one “below” the original so it puts it in the right order in the CSS file).

    The only difference for the fonts and the rest of the files is that the font has to be an included font, or it has to be a Google font. You need to reference the font exactly, not just the google font site. Find the font on Google fonts site and it has the ability there to get the link to that font (for BSS I would suggest you import single fonts rather than a bunch of fonts in one file as there is no way to remove those fonts from the BSS setup as of yet.)

    I usually find a few fonts and import each of them using the Google links, and then find the ones I want to use with trial and error in the CSS by changing the font in the CSS to each of them to see which I like best.

    Simple as can be and no editing necessary outside of BSS for this.

    #3198
    marrco
    Member
    Valued

    to find and link google fonts i use http://fontcdn.org/
    hth

    #3214
    mbaruschke
    Member

    i have tried to overwrite the font, dont work!

    I made new css and change the font from html / body or nav.

    The change dont show.

    #6342
    Masud
    Member
    #6366
    Ajiprasa
    Member

    How to change the nav bar brand name to the centre?

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.