General HTML edit questions

Bootstrap Studio Help
1

I have only been working with Bootstrap Studio for a few days and it looks pretty good. However, I am having difficulty figuring out how to edit the HTML. I want to add some text below my navbar-brand image, but can't figure out how to do this. I've been trying to use the HTML window, but I can't seem to be able to edit anything there like I can do within the styles window. How do I do this? Also, while I am asking, how do I make it so that an element is only displayed at a particular page width?

I appreciate any and all answers.

Chris

2

I too will be interested to hear answer from the devs as I have been trying to add a contacts detail bar above the navbar myself and couldn't.

Most likely due to it being a locked component.

3

Are you guys talking about adding something "to" the navbar itself, or adding something above or below it and not on the navbar?

Without knowing exactly what you're trying to do I can't come up with a good way to explain what to do, but what I can tell you is that the default navbar's navbar brand (or any other element) has options for when it will and will not be seen (breakpoint display settings basically) if you look in the top right corner of the app in the Options area. Look for the Responsive Visibility section of that area and you'll see there are a lot of different settings on there to play with for visibility. It allows you to not only change the breakpoint settings for visibility, but all the style of it's display from block, inline and inline-block depending on your needs for that breakpoint.

Hope that helps some to at least get the breakpoints worked out on how things show and do not show in them.

4

yes Jo - am trying to add a div above navbar brand to be able to show a contacts bar ( tel number and mail addy) but also have it work with the fixed to top option so when a page scrolls it will still show nav bar and contact details.

5

see this site as a very quick example - http://calhoun.ca/ (taken from getbootstrap.com/expo)

6

The Navbar is locked down and doesn't allow you to drag in a div in between the navbar-header and navbar-collapse which is what the site you have linked is doing.

You could convert the navbar to HTML which it then allows you to use it as a Custom Code component where you can do what you want with this. To convert to HTML just right click on the navbar in the Overview pane and select Convert to HTML then double click on some item on the navbar in the Layout View. This will open up the Custom Code tab for that element. I would suggest making any other navbar changes first so you have all the default Options pane options available to you.

Now here is possibly something you can try. It might not be exactly what you want but could be considered as an option.

When you drag the navbar select the navbar in the Overview pane, this will enable the editor toolbar bar. You can click the Link button that makes a little link in the top area of the nav which you can align to the right so it acts like a contact link. With some tricky CSS you can probably manage to get it how you want it.

Saj

7

i did wonder if i was going to have to convert the default html, but was hoping it was just me doing something wrong :D

Ideally what i would like to do is insert a div and change the bg colour etc to make it stand out ish and control via drag and drop.

@BSS devs - could we open this up to allow adding more to nav bar natively through the app?

8

Well I could image you could always build the entire nav from scratch with drag an drop hehe. :P

Yeah I think maybe at little slack would be nice with trying to do things like this.

Here is another thing I think you could try.

Taking this from scratch

  1. drag Div onto Body and give it a class
  2. drag Div onto Div and give it a class
  3. drag navbar onto Body
  4. add class navbar-fixed-top to the first Div
  5. use CSS to unstyle the Nav elements top border
  6. use CSS to style all but the bottom border of the second Div to effectively mimic the Navs top border look
  7. use CSS to give BG color of Div 2 similar to the Navs BG color
  8. use CSS to adjust the buffing space of the Body's content to fit your new nav spacing
  9. use app the "hidden-xs" Div 2
  10. enter contact info etc.. into Div 2

This would give you something like that site anyways.

Saj

9

Cheers saj, I'll give it a go soon and share the results ?

10

So using an inverse navbar I use the following HTML, looked alright.

<div class="navbar-fixed-top">
  <div class="contacts hidden-xs">
    < span>Text< /span>
  </div>
  <nav>
   .....
  </nav>
</div>

With this CSS

@media (min-width: 768px){
nav.navbar.navbar-inverse {
    border-top: 0;
    border-radius: 0 0 4px 4px;
}
.contacts.hidden-xs {
    background-image: linear-gradient(to top,#3c3c3c 0,#222 100%);
    border-radius: 4px 4px 0 0;
    border: 1px solid #080808;
    border-bottom: 0;
    color: #fff;
    padding: .15em .5em;
}
}

Saj

11

Here's what I'm trying to do in simpler terms. In the header for the Product Page template, you have the navbar-brand div. Instead of having FASHION STORE in text, I want to have a logo and add text below the logo (sort of like a tag line). For example, if I were doing a page for Lays potato chips, I'd want their logo, with the text "You never can eat just one!" under it. I know to code this in HTML, but I can't make the HTML panel of the editable so that I can do this. I don't want to rely on the drag-and-drop way of creating a page since I know how to code HTML. I just thought this program would be helpful for me to see the changes I make more quickly than the old way of writing the code and having to load the page into a browser to see if I did it correctly.

Chris Cote

12

You can change the word Brand to your tag line wording. Import your logo image and then drag the image from the Design pane to be in front of your tag line. Then download the component I have for Simple Line BReak and drag that to just after your logo image.

Add CSS

.navbar-brand {
    height: auto;
}

That at least gets you started with what you are try to do. You will then need to get more creative CSS changes to make it all work out for you.

Saj