NavBar with Logo and Gradient Colours

I have two questions. 1. Can I have a Navbar with a Picture logo in it (on the Left Hand Side) ? If so how ? 2. Can the NavBar use gradient colors (e.g. top colour #005695 bottom colour #003963) ? If so how ? Best Wishes John

Hello John,

About your first question, we can use the Image variable of the NavBar control. You can choose an 30px image in order to be used at the left of the NavBar, in which they called "NavBar's brand".

About your second question, certainly, apparently we can apply some gradient style to a NabVar, for example, by using the below code in the "Inline CSS" option of the app, suposing we have a "NavBar1" control in the app.

#Navbar1 { background-image: linear-gradient(to top, blue 0%, red 94%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='red', endColorstr='blue'); }

---

Do I need to put my image into a specific folder ?

Hello John,

Yes; please, use the app's File manager to add an specific image or a directory: then you can use the app's image's path into the Image variable of the "NavBar", even in designtime, that is, using the "NavBar" object inspector.

---

With regards to the image - does it have to be 30px or can it be bigger ? If so how can I make it bigger ? Also the only way I could get the image to be displayed is if I manually copied the file from the source folder to the Compiled\www\app\images folder. Can I get App Builder to do this when building ?

Hello John,

Yes; the image of the "NavBar" control must be 30px... maybe a bit greater, but then the browser must scale it. It's the designed size for the control, not something that we can change... if we don't want to "break" the control in some way.

About your second question, please, take a look at the "NavBar" sample. Open that sample and see in the Menu -> App -> App's files manager. As you can see in the Images tab, we include certain image that is also included by the sample (see the sample's folder).

Then take a look at the NavBar control's Image variable: you can see that we specify the image's local path in that variable.

---

The issue regarding copying the file to the compiled directory is now solved. Thanks for that. 30px for the image on the Navbar is a bit of an issue for me because the Logo of the solution that I am developing is important for the design. Is there an alternative that I can use that will allow me to have the Logo the size I need it (and scale it if it requires scaling) along with a menu on a navbar at the top of the screen ?

Hello John,

Maybe you can match the "brand image" using Javascript or CSS, and then yes, change their size. But maybe it's not a good idea, because, when change the image size, also the control's size change, and, this can cause some posible issues.

I think the point here is to consider that image like for what is designed: it's a "brand image"... not a "logo", nor another kind of image... that is, maybe it's a better idea to prepare a "brand image" (maybe specific for the NavBar) based in the other image or logo.

Please, post here if you have any further question about this! The above is my opinion... and certainly we can try to change the image size using Javascript and / or CSS, so, we can do try it if you wanted... but consider the above, which is my honest opinion.

---

Hello John,

Look at the below CSS code, which we can place in the Inline CSS option of the app:

/* For an specific NavBar1 */ #Navbar1 .navbar-brand img { width: 108px !important; } /* For all the NavBar controls */ .navbar-brand img { width: 108px !important; }

If you want to apply other rules to the NavBar's brand image... that's can be the place.

---

If there is no menu is it possible to hide the menu icon ? If so how ? Also how can I create a similar bar at the bottom of the screen without a menu ?

Hello John,
Take a look at the Navbar.Image value. You will be able to change the image programatically after having checked if the the menu has some content.

About the Navbar's position, it is the .Placement value (take a look at the Navbar example or the Help file.

Good luck :)

Hello John,

To hide the menu toggler we can use some CSS like the below:

.navbar-toggler { display: none !important; }

However, if we don't want a menu... maybe we no need a NavBar at all, but a HTML Content or Container control... or a combination of these...

About to place a NavBar at the bottom, is possible, even we can have two NavBars, one at the top and one at the bottom, take a look at the NavBar's Placement variable and set to "fixed-bottom", for example.

---