SVG logo

[starconfig]

Hi, thanks for the theme! It's great to have a Bootstrap theme.

I'm wondering, are we able to use an SVG logo? When I try using it in the filter, it's not showing on the front end, though PNG works fine.

[crftwrk]

I'm wondering, are we able to use an SVG logo? When I try using it in the filter, it's not showing on the front end, though PNG works fine.

What do you mean exactly here? There are two SVG logos https://github.com/bootscore/bootscore-child/tree/main/assets/img/logo which are linked in the header.php. Default one and one that is used in dark mode:

bootscore/header.php

Lines 47 to 51 in 61df6fc

	<!-- Navbar Brand -->
	<a class="navbar-brand" href="<?= esc_url(home_url()); ?>">
	<img src="<?= esc_url(apply_filters('bootscore/logo', get_stylesheet_directory_uri() . '/assets/img/logo/logo.svg', 'default')); ?>" alt="<?php bloginfo('name'); ?> Logo" class="d-td-none me-2">
	<img src="<?= esc_url(apply_filters('bootscore/logo', get_stylesheet_directory_uri() . '/assets/img/logo/logo-theme-dark.svg', 'theme-dark')); ?>" alt="<?php bloginfo('name'); ?> Logo" class="d-tl-none me-2">
	</a>

They should just replaced by your own svg files in child-theme. svg's are just images like png, jpg... There is a filter available to change the path to the logos if you want to use a different format or rename the images. Are you sure that path to you svg images is correct?

[starconfig]

This works fine

function change_logo_path($logo, $color) {
if ($color === 'theme-dark') {
return get_stylesheet_directory_uri() . '/assets/img/logo/logo.svg';
}
return get_stylesheet_directory_uri() . '/assets/img/logo/logo.svg';
}
add_filter('bootscore/logo', 'change_logo_path', 10, 2);

When I am using my svg logos which is in same folder it's not showing, most likely then is problem with svg file

[starconfig]

It seems like the SVG file for the logo is being rendered with a size of 0x0, which is why it's not displaying properly. You can fix this by explicitly setting the width and height attributes for the SVG file, either in the HTML or through CSS.

img.d-td-none.me-2 {
width: auto;
height: 80px;
}

[crftwrk]

The logo explicitly has no size to display the original size of the svg image file which is 30x30px. To change logo size use the .navbar-brand selector instead img.d-td-none.me-2:

.navbar-brand img {
  width: 150px;
  height: 50px;
}

d-td-none and d-tl-none classes are used to show/hide logo in light/dark theme.

[starconfig]

This question is off-topic, but I couldn't find any information. Is there a solution to change logo sizes or the logo URL when users scroll down? Do we need a different class on the header or something else?

see example here

https://block.codescandy.com/landing-conference.html

[crftwrk]

This question is off-topic... Is there a solution to change logo sizes or the logo URL when users scroll down...

Yes of course, everything is possible. Please open a new discussion to keep things sorted.