Add icon on navigation bar

Hello,
I would like add icon before the label on navigation bar.
The result should be like


In the middle there is the LOGO
Thank

1 Like

Just drag the icon component into the text of the navigation link. It’s a drag and drop operation.

this is not the aspected effect…

:sleepy: :sleepy:

image

from another builder, i have use this code;

<nav id="nav-menu-desktop" class="navbar navbar-expand-lg show dark fixed-top spr-edit-el spr-oc-show spr-wout" style="">
    <div class="container-fluid" style="font-family:georgia,garamond,serif;">
              <div class="row align-items-center justify-content-lg-center">
           <div class="col-3 hidden-lg">
                <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target=".main-menu-collapse" aria-controls="navbarMenuContent" aria-expanded="false" aria-label="Toggle navigation"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
            </div>
            <div class="col-6 col-lg-auto order-lg-2 text-center">
                <a class="navbar-brand" href="#">
                    <img src="images/gallery/uploaded/2/Nuovo-logo-Gold-transp.png" height="100" alt="" class="mw-100 dark" srcset="" width="100" style="">
                </a>
            </div>
            <div class="col-lg-5 order-lg-1 navbar-collapse main-menu-collapse justify-content-lg-end collapse" style="">
                <ul class="navbar-nav mb-0" style="">
                    <li class="nav-item active">
                        <a class="nav-link smooth" href="#home" style="" target="_self"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 576 512" src="images/gallery/faicons/home.svg" class="icon icon-pos-left" alt="icon" style="fill: rgb(255, 255, 255);" srcset=""><path d="M488 312.7V456c0 13.3-10.7 24-24 24H348c-6.6 0-12-5.4-12-12V356c0-6.6-5.4-12-12-12h-72c-6.6 0-12 5.4-12 12v112c0 6.6-5.4 12-12 12H112c-13.3 0-24-10.7-24-24V312.7c0-3.6 1.6-7 4.4-9.3l188-154.8c4.4-3.6 10.8-3.6 15.3 0l188 154.8c2.7 2.3 4.3 5.7 4.3 9.3zm83.6-60.9L488 182.9V44.4c0-6.6-5.4-12-12-12h-56c-6.6 0-12 5.4-12 12V117l-89.5-73.7c-17.7-14.6-43.3-14.6-61 0L4.4 251.8c-5.1 4.2-5.8 11.8-1.6 16.9l25.5 31c4.2 5.1 11.8 5.8 16.9 1.6l235.2-193.7c4.4-3.6 10.8-3.6 15.3 0l235.2 193.7c5.1 4.2 12.7 3.5 16.9-1.6l25.5-31c4.2-5.2 3.4-12.7-1.7-16.9z"></path></svg><font color="#edb059" class=""><span class="text-uppercase">Home</span></font> </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link smooth" href="#menu-features" style="" target="_self"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 384 512" src="images/gallery/faicons/fire.svg" class="icon icon-pos-left" alt="icon" style="fill: rgb(255, 255, 255);" srcset=""><path d="M216 23.858c0-23.802-30.653-32.765-44.149-13.038C48 191.851 224 200 224 288c0 35.629-29.114 64.458-64.85 63.994C123.98 351.538 96 322.22 96 287.046v-85.51c0-21.703-26.471-32.225-41.432-16.504C27.801 213.158 0 261.332 0 320c0 105.869 86.131 192 192 192s192-86.131 192-192c0-170.29-168-193.003-168-296.142z"></path></svg><font color="#edb059" class=""><span class="text-uppercase">Features</span></font></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link smooth" href="#numbers" style="" target="_self"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512" src="images/gallery/faicons/chart-bar.svg" preserveAspectRatio="xMidYMid meet" class="icon icon-pos-left" alt="icon" style="fill: rgb(255, 255, 255);" srcset=""><path d="M500 384c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12V76c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v308h436zm-308-44v-72c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v72c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0V204c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v136c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0V140c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v200c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0V108c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v232c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12z"></path></svg><font color="#edb059" class=""><span class="text-uppercase">Numbers</span></font></a>
                    </li>
   </ul>
            </div>
            <div class="col-lg-5 order-lg-3 navbar-collapse main-menu-collapse collapse" style="">
                <ul class="navbar-nav mt-0" style="">
                    <li class="nav-item active">
                        <a class="nav-link smooth" href="#download" style="" target="_self"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 640 512" src="images/gallery/faicons/cloud-download-alt.svg" class="icon icon-pos-left" alt="icon" style="fill: rgb(255, 255, 255);" srcset=""><path d="M640 352c0 70.692-57.308 128-128 128H144C64.471 480 0 415.529 0 336c0-62.773 40.171-116.155 96.204-135.867A163.68 163.68 0 0 1 96 192c0-88.366 71.634-160 160-160 59.288 0 111.042 32.248 138.684 80.159C409.935 101.954 428.271 96 448 96c53.019 0 96 42.981 96 96 0 12.184-2.275 23.836-6.415 34.56C596.017 238.414 640 290.07 640 352zm-246.627-64H328V176c0-8.837-7.164-16-16-16h-48c-8.836 0-16 7.163-16 16v112h-65.373c-14.254 0-21.393 17.234-11.314 27.314l105.373 105.373c6.248 6.248 16.379 6.248 22.627 0l105.373-105.373c10.08-10.08 2.941-27.314-11.313-27.314z"></path></svg><font color="#edb059" class=""><span class="text-uppercase">Download</span></font></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link smooth" href="#menu-contact--0" style="" target="_self"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512" src="images/gallery/faicons/at.svg" class="icon icon-pos-left" alt="icon" style="fill: rgb(255, 255, 255);" srcset=""><path d="M256 8C118.941 8 8 118.919 8 256c0 137.059 110.919 248 248 248 48.154 0 95.342-14.14 135.408-40.223 12.005-7.815 14.625-24.288 5.552-35.372l-10.177-12.433c-7.671-9.371-21.179-11.667-31.373-5.129C325.92 429.757 291.314 440 256 440c-101.458 0-184-82.542-184-184S154.542 72 256 72c100.139 0 184 57.619 184 160 0 38.786-21.093 79.742-58.17 83.693-17.349-.454-16.91-12.857-13.476-30.024l23.433-121.11C394.653 149.75 383.308 136 368.225 136h-44.981a13.518 13.518 0 0 0-13.432 11.993l-.01.092c-14.697-17.901-40.448-21.775-59.971-21.775-74.58 0-137.831 62.234-137.831 151.46 0 65.303 36.785 105.87 96 105.87 26.984 0 57.369-15.637 74.991-38.333 9.522 34.104 40.613 34.103 70.71 34.103C462.609 379.41 504 307.798 504 232 504 95.653 394.023 8 256 8zm-21.68 304.43c-22.249 0-36.07-15.623-36.07-40.771 0-44.993 30.779-72.729 58.63-72.729 22.292 0 35.601 15.241 35.601 40.77 0 45.061-33.875 72.73-58.161 72.73z"></path></svg><font color="#edb059" class=""><span class="text-uppercase">Contact</span></font></a>
</li>
  </ul>
            </div>
        </div>
    </div>
</nav>

You’ll always need to adjust things to your liking @rsgs.beraldog as this isn’t a full drag and drop and not get your hands a bit dirty app. It’s really important that you have some knowledge of Bootstrap, HTML and CSS in order to be sure your components are added and adjusted correctly.

In your case it’s pretty obvious it’s the Logo causing your issues. The app did exactly what you told it to, but the structure is altering according to it’s content as it should be as well. Work around that and see what you can do with it.

Using code from another builder is probably not the best way to go about this. You’d be better off building your Navbar in Bootstrap Studio itself. Then you can drag and drop whatever icons you like into your links. There are a number of Navbars with centered brand logos in the online library. If you have your logo, it should be simple to recreate this component without the need for any custom code.

I created the Navbar for you and posted in the online components.

It’s called Click And Claim Navbar

I will leave it up for one week, so download it before next Tuesday. (You will need to style the text color/font/etc… yourself.)

1 Like

Welcome to the BSS world, tomorrow I’ll make and send you this menu, I’ll also publish a component that will serve you, and I’ll try to explain how to make it, it’s already night here in Brazil, tomorrow I’ll do it and send it to you.

Good morning, I’m already anticipating the explanations a little.
You will need to add two navbar components to your project, or a navbar and an offcanvas if you prefer, you will have to customize each one differently for the desired views, if you are going to use two navbar you will need to set the display to none and block for the shapes different views of them, if you choose to use a navbar and an offcanvas just customize them as you want the view.
If you need help later I will be available to assist you.

1 Like

Check if this is what you want to do.

Apresentação (apresentacao.bss.design)

There are a number some layout issues with this Navbar component you’ve created at different screen sizes. Download the one I created from the online library for reference.

Click And Claim Navbar

1 Like