Hello, I would like it if the menu was able to be left-justified and inline with the w

Ability to left-justify the menu about bulrush HOT 1 OPEN

Techcable commented on July 1, 2024

Ability to left-justify the menu

from bulrush.

Comments (1)

textbook commented on July 1, 2024

I don't think you could do this just by adding CSS, it would be a structural change to the layout of the page. Bulrush uses the navbar component for both the header (where the title is) and the menu:

bulrush/bulrush/templates/base.html

Lines 23 to 58 in 32a08fb

 <header class="hero is-primary"> 

 <div class="hero-head"> 

 <div class="container"> 

 <nav class="navbar"> 

 <div class="navbar-brand"> 

 <a class="navbar-item title is-3{% if output_file == "index.html" %} is-active{% endif %}" 

 href="{{ SITEURL }}/">{{ SITENAME }}</a> 

 </div> 

 </nav> 

 </div> 

 </div> 

 </header> 

 <nav class="navbar has-shadow is-hidden-print"> 

 <div class="container"> 

 <div class="navbar-center"></div> 

 <span id="navToggle" class="navbar-burger"> 

 <span></span> 

 <span></span> 

 <span></span> 

 </span> 

 <div id="navMenu" class="navbar-menu"> 

 <div class="navbar-end"> 

 {% for title, link in MENUITEMS|reverse %} 

 <a class="navbar-item is-tab" href="{{ link }}">{{ title }}</a> 

 {% endfor %} 

 {% if DISPLAY_CATEGORIES_ON_MENU %} 

 {% for cat, null in categories|reverse %} 

 <a class="navbar-item is-tab {% if cat == category %}is-active{% endif %}" 

 href="{{ SITEURL }}/{{ cat.url }}">{{ cat }}</a> 

 {% endfor %} 

 {% endif %} 

 </div> 

 </div> 

 </div> 

 </nav>

This would be a possible but quite substantial change to make conditionally with a configuration option. I'd be open to discussing a proposed implementation but at a certain point you might be better making a fork of Bulrush you can adapt to your specific needs (#36 suggests you have other changes in mind!)

from bulrush.

Recommend Projects

Ability to left-justify the menu about bulrush HOT 1 OPEN

Comments (1)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

	<header class="hero is-primary">
	<div class="hero-head">
	<div class="container">
	<nav class="navbar">
	<div class="navbar-brand">
	<a class="navbar-item title is-3{% if output_file == "index.html" %} is-active{% endif %}"
	href="{{ SITEURL }}/">{{ SITENAME }}</a>
	</div>
	</nav>
	</div>
	</div>
	</header>

	<nav class="navbar has-shadow is-hidden-print">
	<div class="container">
	<div class="navbar-center"></div>
	<span id="navToggle" class="navbar-burger">
	<span></span>
	<span></span>
	<span></span>
	</span>
	<div id="navMenu" class="navbar-menu">
	<div class="navbar-end">
	{% for title, link in MENUITEMS\|reverse %}
	<a class="navbar-item is-tab" href="{{ link }}">{{ title }}</a>
	{% endfor %}
	{% if DISPLAY_CATEGORIES_ON_MENU %}
	{% for cat, null in categories\|reverse %}
	<a class="navbar-item is-tab {% if cat == category %}is-active{% endif %}"
	href="{{ SITEURL }}/{{ cat.url }}">{{ cat }}</a>
	{% endfor %}
	{% endif %}
	</div>
	</div>
	</div>
	</nav>