Override core/navigation block styles without using `!important` (see comment below for implementation details)

functions-alternative-approach.php

/**
 * Enqueues custom block styles for the theme.
 *
 * This function scans the styles folder in the theme to locate block styles.
 * It then enqueues each block style using the `wp_enqueue_block_style` function.
 *
 * @url https://developer.wordpress.org/reference/functions/wp_enqueue_block_style/
 */
function devrel_enqueue_custom_block_styles() {

	// Scan our styles folder to locate block styles.
	$files = glob( get_template_directory() . '/assets/styles/*.css' );

	foreach ( $files as $file ) {

		// Get the filename and core block name.
		$filename   = basename( $file, '.css' );
		$block_name = str_replace( 'core-', 'core/', $filename );

		// Place the file in the assets/styles folder.
		// Example: assets/styles/core-navigation.css
		wp_enqueue_block_style(
			$block_name,
			array(
				'handle' => "devrel-block-{$filename}",
				'src'    => get_theme_file_uri( "assets/styles/{$filename}.css" ),
				'path'   => get_theme_file_path( "assets/styles/{$filename}.css" ),
			)
		);
	}
}
add_action( 'init', 'devrel_enqueue_custom_block_styles' );

functions.php

/**
 * Enqueues custom block styles for the theme.
 *
 * This function loads additional block styles for specific blocks defined in the $styled_blocks array.
 * It uses the wp_enqueue_block_style() function to enqueue the styles.
 *
 * @url https://developer.wordpress.org/reference/functions/wp_enqueue_block_style/
 */
function devrel_enqueue_custom_block_styles() {
	/*
	* Load additional block styles.
	*/
	$styled_blocks = array( 'navigation' );

	// Example: assets/styles/navigation.css.
	foreach ( $styled_blocks as $block_name ) {
		$args = array(
			'handle' => "devrel-$block_name",
			'src'    => get_theme_file_uri( "assets/styles/$block_name.css" ),
		);

		wp_enqueue_block_style( "core/$block_name", $args );
	}
}
add_action( 'after_setup_theme', 'devrel_enqueue_custom_block_styles' );

How do I modify the breakpoint(s) for the Navigation block?

Approach #1 – Just need to override a single block

Use the functions.php example above if you're really keen on just overriding one block with some CSS.

1. Drop the code in functions.php
2. Create assets/styles/navigation.css and
3. Place only the CSS you want to override. You can source the Navigation block's SCSS here: https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/navigation/style.scss. Bring over only what you need and leave the rest to core.

Example CSS for navigation.css

@media (min-width:700px) {
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		background-color: inherit;
		display: block;
		position: relative;
		width: 100%;
		z-index: auto;
	}
}

@media (min-width:700px) {
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none;
	}
}

Approach #2 – Need to override multiple core blocks

Use the functions-alternative-approach.php example above if you foresee needing to override some other core blocks in your theme, and you don't want to just override a single block.

1. Drop the code in functions-alternative-approach.php in your theme's functions.php
2. Create assets/styles/core-navigation.css and
3. Place only the CSS you want to override. You can source the Navigation block's SCSS here: https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/navigation/style.scss. Bring over only what you need and leave the rest to core.

Example CSS for navigation.css

@media (min-width:700px) {
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		background-color: inherit;
		display: block;
		position: relative;
		width: 100%;
		z-index: auto;
	}
}

@media (min-width:700px) {
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none;
	}
}