Add and align text to custom Electron Menu bar CSS

Question

So I have the following CSS and HTML for a menu bar:

<header>
   <div id="name">Unnamed Masterpiece</div>
   <div id="close" onclick="closeWindow()">✕</div>
   <div id="min" onclick="minWindow()">―</div>
</header>

header {
    display: flex;
    justify-content: flex-start;
    -webkit-app-region: drag;
    background: #292929;
    flex-direction: row-reverse;
}

Which, with the close and minimize sign individually styled gives me the following:

However I would like the title to be on the far left and centered.

How would I do this?

Answer 1

Without changing the HTML or CSS you already have, you can add this to you CSS:

#name {
 flex: 1;
 text-align: center;
 order: 1;
}
#close, #min {
  order: 0;
}

It will change the order of elements, make the text grow and also center it.

Answer 2

You can try this:

header {
    display: flex;
    justify-content: flex-start;
    -webkit-app-region: drag;
    background: #292929;
    align-items: center;
}

<header>
   <div id="name" style="width: 100%;">Unnamed Masterpiece</div>
   <div id="min" onclick="minWindow()" style="">―</div>
   <div id="close" onclick="closeWindow()">✕</div>
</header>

Answer 3

Hi You can use like this. I suggest you don't use inline style and by the id style.

<div className="window-header">
        <div className="left-side">
          Logo - icon
        </div>
        <div className="draggable-bar" id="titleBar">
            Title name or names
        </div>
        <div className="right-side">
            <div id="min-btn" className="btn-box">
                <div className="min"></div>
            </div>
            <div id="max-btn" className="btn-box max">
                <div className="maxmize"></div>
            </div>
            <div id="close-btn" className="btn-box">
                <div className="close"></div>
            </div>
        </div>
    </div>

Style codes =>

.window-header {
  display: flex;
}
.window-header .left-side, .window-header .draggable-bar, .window-header .right-side {
  display: flex;
  flex: 1;
}
.window-header .draggable-bar {
  -webkit-app-region: drag;
  flex-grow: 34;
  flex-basis: 0;
  align-items: center;
  justify-content: center;
  color: #c3c3c3;
}
.window-header .draggable-bar:hover {
  cursor: move;
}
.window-header .left-side img {
  display: flex;
  width: 15px;
  height: 24px;
  margin-top: 3px;
  margin-left: 4px;
}
.window-header .left-side .title {
  align-items: center;
  display: flex;
  color: #999;
  padding-left: 5px;
  user-select: none;
}
.window-header .right-side {
  justify-items: flex-end;
  justify-content: flex-end;
  display: flex;
}
.window-header .right-side .btn-box {
  display: inline-flex;
  justify-content: center;
  width: 30px;
  height: 30px;
}
.window-header .right-side .btn-box:hover {
  background-color: #797979;
}
.window-header .right-side .btn-box:last-child:hover {
  background-color: red;
}
.window-header .right-side .btn-box .min {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNyAyIj48ZGVmcz48c3R5bGU+LmF7ZmlsbDpub25lO3N0cm9rZTojZDNkM2QzO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS13aWR0aDoycHg7fTwvc3R5bGU+PC9kZWZzPjxsaW5lIGNsYXNzPSJhIiB4Mj0iMjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiLz48L3N2Zz4=);
  width: 15px;
  height: 15px;
  background-repeat: no-repeat;
  position: relative;
  top: 50%;
}
.window-header .right-side .btn-box.max .maxmize {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCI+PGRlZnM+PHN0eWxlPi5hLC5je2ZpbGw6bm9uZTt9LmF7c3Ryb2tlOiNkM2QzZDM7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS13aWR0aDoycHg7fS5ie3N0cm9rZTpub25lO308L3N0eWxlPjwvZGVmcz48ZyBjbGFzcz0iYSI+PHJlY3QgY2xhc3M9ImIiIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgcng9IjUiLz48cmVjdCBjbGFzcz0iYyIgeD0iMSIgeT0iMSIgd2lkdGg9IjI4IiBoZWlnaHQ9IjI4IiByeD0iNCIvPjwvZz48L3N2Zz4=);
  width: 13px;
  height: 13px;
  background-repeat: no-repeat;
  position: relative;
  top: 25%;
}
.window-header .right-side .btn-box.unmax .maxmize {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzOSA0MyI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6bm9uZTtzdHJva2UtbGluZWNhcDpyb3VuZDt9LmIsLmN7c3Ryb2tlOm5vbmU7fS5je2ZpbGw6I2QzZDNkMzt9PC9zdHlsZT48L2RlZnM+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTMwOCAtMTkyKSI+PGcgY2xhc3M9ImEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMxNyAxOTIpIj48cGF0aCBjbGFzcz0iYiIgZD0iTTUsMEgyNWE1LDUsMCwwLDEsNSw1VjI1YTUsNSwwLDAsMS01LDVIMTlWMTguMzMzYTQuMTA2LDQuMTA2LDAsMCwwLS4yLTEuNTU5LDIuMjUzLDIuMjUzLDAsMCwwLS44NTgtLjk3Nyw0LjQzNyw0LjQzNywwLDAsMC0yLjYzNC0uOEgwVjVBNSw1LDAsMCwxLDUsMFoiLz48cGF0aCBjbGFzcz0iYyIgZD0iTSA1IDIgQyAzLjM0NTc5MDg2MzAzNzEwOSAyIDIgMy4zNDU3OTA4NjMwMzcxMDkgMiA1IEwgMiAxMi45OTg2NTkxMzM5MTExMyBMIDE1LjI5NzA5NTI5ODc2NzA5IDEyLjk5ODY1OTEzMzkxMTEzIEMgMTUuMzA4MDE4Njg0Mzg3MjEgMTIuOTk4NTUwNDE1MDM5MDYgMTUuMzIyMjcwMzkzMzcxNTggMTIuOTk4NDYwNzY5NjUzMzIgMTUuMzM5Njk5NzQ1MTc4MjIgMTIuOTk4NDYwNzY5NjUzMzIgQyAxNS45MDQxNzA5ODk5OTAyMyAxMi45OTg0NjA3Njk2NTMzMiAxNy44MDA2MDE5NTkyMjg1MiAxMy4wODcwNzgwOTQ0ODI0MiAxOS4xNDYzMDEyNjk1MzEyNSAxNC4xOTM2OTEyNTM2NjIxMSBDIDE5LjUyMDg4MTY1MjgzMjAzIDE0LjQ1MDA5NjEzMDM3MTA5IDIwLjI0OTQ0ODc3NjI0NTEyIDE1LjA0NDU4OTk5NjMzNzg5IDIwLjY0OTU1OTAyMDk5NjA5IDE2LjAwNjAzMTAzNjM3Njk1IEMgMjEuMDM0MzEzMjAxOTA0MyAxNi45MzA1NjI5NzMwMjI0NiAyMS4wMjI2MjQ5Njk0ODI0MiAxNy45ODcwMTY2Nzc4NTY0NSAyMSAxOC4zOTU1MzgzMzAwNzgxMyBMIDIxIDI4IEwgMjUgMjggQyAyNi42NTQyMDkxMzY5NjI4OSAyOCAyOCAyNi42NTQyMDkxMzY5NjI4OSAyOCAyNSBMIDI4IDUgQyAyOCAzLjM0NTc5MDg2MzAzNzEwOSAyNi42NTQyMDkxMzY5NjI4OSAyIDI1IDIgTCA1IDIgTSA1IDAgTCAyNSAwIEMgMjcuNzYxNDE5Mjk2MjY0NjUgMCAzMCAyLjIzODU4MDcwMzczNTM1MiAzMCA1IEwgMzAgMjUgQyAzMCAyNy43NjE0MTkyOTYyNjQ2NSAyNy43NjE0MTkyOTYyNjQ2NSAzMCAyNSAzMCBMIDE5IDMwIEwgMTkgMTguMzMzMzMwMTU0NDE4OTUgQyAxOSAxOC4zMzMzMzAxNTQ0MTg5NSAxOS4wNjY4Njk3MzU3MTc3NyAxNy40MDgzNDk5OTA4NDQ3MyAxOC44MDMwNzAwNjgzNTkzOCAxNi43NzQ0NTk4Mzg4NjcxOSBDIDE4LjUzOTI3MDQwMTAwMDk4IDE2LjE0MDU2OTY4Njg4OTY1IDE3Ljk0NDc4OTg4NjQ3NDYxIDE1Ljc5Nzc2MDAwOTc2NTYzIDE3Ljk0NDc4OTg4NjQ3NDYxIDE1Ljc5Nzc2MDAwOTc2NTYzIEMgMTcuMDkzMTE4NjY3NjAyNTQgMTUuMDI3OTQ4Mzc5NTE2NiAxNS41NjgyOTY0MzI0OTUxMiAxNC45OTg0NTY5NTQ5NTYwNSAxNS4zMzk2OTQ5NzY4MDY2NCAxNC45OTg0NTY5NTQ5NTYwNSBDIDE1LjMyMDczMjExNjY5OTIyIDE0Ljk5ODQ1Njk1NDk1NjA1IDE1LjMxMDcwMDQxNjU2NDk0IDE0Ljk5ODY2MDA4NzU4NTQ1IDE1LjMxMDcwMDQxNjU2NDk0IDE0Ljk5ODY2MDA4NzU4NTQ1IEwgMCAxNC45OTg2NjAwODc1ODU0NSBDIDAgMTQuOTk4NjYwMDg3NTg1NDUgMCAxMS40Njc5NTA4MjA5MjI4NSAwIDUgQyAwIDIuMjM4NTgwNzAzNzM1MzUyIDIuMjM4NTgwNzAzNzM1MzUyIDAgNSAwIFoiLz48L2c+PGcgY2xhc3M9ImEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMwOCAyMDUpIj48cGF0aCBjbGFzcz0iYiIgZD0iTTUsMEgyNWE1LDUsMCwwLDEsNSw1VjI1YTUsNSwwLDAsMS01LDVINWE1LDUsMCwwLDEtNS01VjVBNSw1LDAsMCwxLDUsMFoiLz48cGF0aCBjbGFzcz0iYyIgZD0iTSA1IDIgQyAzLjM0NTc5MDg2MzAzNzEwOSAyIDIgMy4zNDU3OTA4NjMwMzcxMDkgMiA1IEwgMiAyNSBDIDIgMjYuNjU0MjA5MTM2OTYyODkgMy4zNDU3OTA4NjMwMzcxMDkgMjggNSAyOCBMIDI1IDI4IEMgMjYuNjU0MjA5MTM2OTYyODkgMjggMjggMjYuNjU0MjA5MTM2OTYyODkgMjggMjUgTCAyOCA1IEMgMjggMy4zNDU3OTA4NjMwMzcxMDkgMjYuNjU0MjA5MTM2OTYyODkgMiAyNSAyIEwgNSAyIE0gNSAwIEwgMjUgMCBDIDI3Ljc2MTQxOTI5NjI2NDY1IDAgMzAgMi4yMzg1ODA3MDM3MzUzNTIgMzAgNSBMIDMwIDI1IEMgMzAgMjcuNzYxNDE5Mjk2MjY0NjUgMjcuNzYxNDE5Mjk2MjY0NjUgMzAgMjUgMzAgTCA1IDMwIEMgMi4yMzg1ODA3MDM3MzUzNTIgMzAgMCAyNy43NjE0MTkyOTYyNjQ2NSAwIDI1IEwgMCA1IEMgMCAyLjIzODU4MDcwMzczNTM1MiAyLjIzODU4MDcwMzczNTM1MiAwIDUgMCBaIi8+PC9nPjwvZz48L3N2Zz4=);
  width: 15px;
  height: 15px;
  background-repeat: no-repeat;
  position: relative;
  top: 25%;
}
.window-header .right-side .btn-box .close {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMy40MTQgMTMuNDE0Ij48ZGVmcz48c3R5bGU+LmF7ZmlsbDpub25lO3N0cm9rZTojZDNkM2QzO3N0cm9rZS1saW5lY2FwOnJvdW5kO308L3N0eWxlPjwvZGVmcz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjQyLjc5MyAtMTgyLjc5MykiPjxsaW5lIGNsYXNzPSJhIiB4Mj0iMTIiIHkyPSIxMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjQzLjUgMTgzLjUpIi8+PGxpbmUgY2xhc3M9ImEiIHgxPSIxMiIgeTI9IjEyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNDMuNSAxODMuNSkiLz48L2c+PC9zdmc+);
  width: 12px;
  height: 12px;
  background-repeat: no-repeat;
  position: relative;
  position: relative;
  top: 30%;
}

This is JS code

function init() {

        const window = remote.getCurrentWindow();


        document.getElementById("min-btn").addEventListener("click", function (e) {

            window.minimize();

        });

        document.getElementById("max-btn").addEventListener("click", function (e) {

            if (!window.isMaximized()) {
                this.classList.remove('max')
                this.classList.add('unmax')
                window.maximize();

            } else {
                this.classList.remove('unmax')
                this.classList.add('max')
                window.unmaximize();
            }
        });

        document.getElementById("close-btn").addEventListener("click", function (e) {

            window.close();

        });


        //Listened to the application window sizes and if sizes changed, size icon is changed.

        if (remote.getCurrentWindow().isMaximized()) {
            document.getElementById("max-btn").classList.remove('max')
            document.getElementById("max-btn").classList.add('unmax')
        } else {
            document.getElementById("max-btn").classList.remove('unmax')
            document.getElementById("max-btn").classList.add('max') 
        }

        remote.getCurrentWindow().on('resize', _.debounce(function () {

            if (remote.getCurrentWindow().isMaximized()) {
                document.getElementById("max-btn").classList.remove('max')
                document.getElementById("max-btn").classList.add('unmax')
            } else {
                document.getElementById("max-btn").classList.remove('unmax')
                document.getElementById("max-btn").classList.add('max')
            }

        }, 100))


    };

    document.onreadystatechange = function () {
        if (document.readyState == "complete") {
            init();
        }
    };