How to scale the logo in the navbar

[drtom]

I've made some progress, but still have a few things to work out before going live.

My logo in the main navbar is perfect on my cell phone but too small on my laptop. This little detail has been bugging me, and I haven't figured out how to fix it.

Screenshot from 2025-06-26 21-01-30.png

Screenshot from 2025-06-26 21-08-14.png

Any suggestions on how to get the image to scale better?

Actually, I'd like to also enlarge the navbar itself a bit, which might help with the scaling issue.

[heatherbell]

Any suggestions on how to get the image to scale better?

To my eye, your Logo on the larger screen looks ideal but you could try using your image editor software to make it bigger and upload it again (though there may then be unintended consequences on small screen.)
For example, compare this demo:
https://psiwebsites.com/1103/
with the core demo:
https://phoenixcart.org/demo/
If that is not what you want, you can experiment with CSS sizing rules to target that specific image.

Actually, I'd like to also enlarge the navbar itself a bit, which might help with the scaling issue.

The height of the Navbar will automatically increase according to contents but maybe that's not what you mean.

Design wise, to my eye, I would use image editing software to give all product images a canvas size of the same aspect ratio so contents of product cards line up in a more visually pleasing way.
Maybe, also, increase vertical spacing (margins) between main elements like between the carousel and Featured Products to give visual 'breathing space'.
As a customer, I might expect to see the 'Account' over on the right next to the 'Cart' in the Navbar.

Otherwise, it's good to see someone making a good job of branding and making their site stand out and memorable.
BTW, you have unread Private Message.

[drtom]

To my eye, your Logo on the larger screen looks ideal but you could try using your image editor software to make it bigger and upload it again (though there may then be unintended consequences on small screen.)

Sure, it's subjective to at least some extent.

Before posting I tried several sizes. Does not scale well, if at all (it seems)

If that is not what you want, you can experiment with CSS sizing rules to target that specific image.

I had been having trouble figuring out how to isolate the image, but just found that .navbar-brand img does the trick.

It's better now, I think.

[/quote]

Screenshot from 2025-06-27 15-04-31.png

Screenshot from 2025-06-27 14-45-21.png

I know, slight difference. In the future I may use media queries to scale more to my liking. Time permitting.

Design wise, to my eye, I would use image editing software to give all product images a canvas size of the same aspect ratio so contents of product cards line up in a more visually pleasing way.
Maybe, also, increase vertical spacing (margins) between main elements like between the carousel and Featured Products to give visual 'breathing space'.

Really appreciate the suggestions. Plenty of work still to do.

As a customer, I might expect to see the 'Account' over on the right next to the 'Cart' in the Navbar.

I agree with you and did work on that. This was the best I could do. The Navbar Content Placement of the 'Account' is currently Center and the 'Shopping Cart' is Right. If I change that to both Right they both scoot left.

I tried every combination of placement for both, and this was the best I could do. I even tried changing their sort order - just hoping.

Otherwise, it's good to see someone making a good job of branding and making their site stand out and memorable.

[heatherbell]

Does not scale well, if at all (it seems)

That's right, there's no img-fluid class (that does the scaling) on that image, else it could shrink to miniscule on small devices.

The Navbar Content Placement of the 'Account' is currently Center and the 'Shopping Cart' is Right. If I change that to both Right they both scoot left.

You're correct. Those Left, Center and Right placement areas do not behave well if only 1 area has modules. They will align left if there's no module enabled to display to the left of them if you get me. For example, enable the Specials or Search module and set to Left and you should then see the Account and Cart align nicely on the Right (if they're set to Right).
One site we worked on did not want a link to either Specials or Search so we made a new Contact Us module to display there.
BTW double check all Navbar modules have unique Sort Orders, they behave strangely if they do not.

[drtom]

All good info to know heatherbell. Thank you.

I gather then, that there's not much I can do to get the cart and hamburger button well positioned on smaller devices, other than to minimize the logo enough to allow them to fit on the right (well, there may also be the possibility of
eliminating the option of opening an account and leaving only the cart).

The placement above is truly awful.

[heatherbell]

I gather then, that there's not much I can do to get the cart and hamburger button well positioned on smaller devices, other than to minimize the logo enough to allow them to fit on the right

As I mentioned in previous post with regards to increasing the size of the Logo: "there may then be unintended consequences on small screen" which is what you are seeing.

well, there may also be the possibility of
eliminating the option of opening an account and leaving only the cart

That is inadvisable.
You have increased the Mini Logo size on large screen, a change which is, to my eye, imperceptible and has little/no benefit to UX and causes problems on small screen.
Get the display on small screen looking good, statistically the majority of users use a small device.
So use a Mini Logo size that fits well on small screen so Hamburger - Logo - Cart on same row.

[heatherbell]

If I change that to both Right they both scoot left.

Spent ages to achieve a solution to this that did not require a Navbar module to be installed on Left, did not require changes to core code and did not result in unintended consequences.
So, try this in your user.css:

Code: Select all

.offcanvas-body ul.navbar-nav:last-of-type {
  margin-left: auto !important;
}

Anyway, seems to work on this demo https://psiwebsites.com/1103/ but have a test.

[drtom]

Spent ages to achieve a solution to this that did not require a Navbar module to be installed on Left, did not require changes to core code and did not result in unintended consequences.
So, try this in your user.css:

Code: Select all

.offcanvas-body ul.navbar-nav:last-of-type {
  margin-left: auto !important;
}

Anyway, seems to work on this demo https://psiwebsites.com/1103/ but have a test.

Thank you!

What I did in the meantime was to go ahead and include the 'Search' module. I then did as I speculated earlier and added a few media queries to the CSS so as to adjust the logo accordingly.

Thought about using only the hands over drum without the brand name for smaller devices, but this seems to be working great.

Screenshot from 2025-07-02 20-36-38.png

[heatherbell]

I then did as I speculated earlier and added a few media queries to the CSS so as to adjust the logo accordingly.

Glad you achieved a solution.
In the spirit of community 'give and take', why not share that solution in case it might help future readers.

[drtom]

Glad you achieved a solution.
In the spirit of community 'give and take', why not share that solution in case it might help future readers.

Sure. It's not exactly a state secret.

Code: Select all

/*Adjust logo size according to screen size.*/
@media screen and (max-width:320px){
.navbar-brand img{width: calc(6rem + .5vw);
                  height:auto;
                  margin-top:0;
                 } 
}

@media screen and (min-width:321px) and (max-width:480px){
.navbar-brand img{width: calc(12rem + 2vw);
                  height:auto;
                  margin-top:0;
                 } 
}

@media screen and (min-width:481px) and (max-width:600px){
.navbar-brand img{width: calc(15rem + 2vw);
                  height:auto;
                  margin-top:0;
                 } 
}

@media screen and (min-width:601px) and (max-width:770px){
.navbar-brand img{width: calc(18rem + 2vw);
                  height:auto;
                  margin-top:0;
                 } 
}

@media screen and (min-width:771px) and (max-width:860px){
.navbar-brand img{width: calc(20rem + 3vw);
                  height:auto;
                  margin-top:0;
                 } 
}

@media screen and (min-width:861px){
.navbar-brand img{width: calc(25rem + 4vw);
                  height:auto;
                  margin-top:0;
                 } 
}