Move 'Start a Discussion' Button to Header Navigation Bar?

User31

G'day folks, I am seeking a rare and powerful CSS/LESS magicka spell to summon the ['Start a Discussion'] button and then bannish it to the center of the 'Header Navigation Bar'.

The trouble is that I've completely disabled the 'Secondary Navigation Bar' & the 'Side Navigation Panel'-(*where it's usually located), so now the [Start a Discussion] button is basically AWOL.

Yesterday I attempted to instruct an AI to provide a code for applying the [Start a Discussion] button to the 'Header Nav Bar', but the AI's code proved useless at this task.

Here's the AI code:

/* ((27)) CUSTOM ANIMATED START DISCUSSION BUTTON BEGIN */
.IndexPage-newDiscussion,
.StartDiscussionButton {
    background: linear-gradient(124deg, #000000, #ffffff, #000000, #ffffff, #000000, #ffffff, #000000, #ffffff, #000000);
    color: black;
    font-family: Garamond, serif;
    font-size: 19px;
    font-weight: 600 !important;
    text-shadow: 0 0 0px white, 0 0 1px white, 0 0 2px white, 0 0 3px white, 0 0 4px white, 0 0 5px white, 0 0 6px white, 0 0 7px white, 0 0 8px white, 0 0 9px white, 0 0 10px white, 0 0 11px white, 0 0 12px white, 0 0 13px white, 0 0 14px white, 0 0 15px white, 0 0 16px white, 0 0 17px white;
    background-size: 1800% 1800%;
    animation: rainbow 20s ease infinite;
    border-radius: 5px;
    padding: 10px 20px;
    margin: 10px;
    display: inline-block;
    transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;
}

.StartDiscussionButton:hover {
    transform: scale(1.1);
    background: linear-gradient(124deg, #ffffff, #000000, #ffffff, #000000, #ffffff, #000000, #ffffff, #000000, #ffffff);
    color: black;
}

@keyframes rainbow {
    0% {
        background-position: 0% 62%;
    }

    50% {
        background-position: 80% 19%;
    }

    100% {
        background-position: 0% 62%;
    }
}

/* ((27)) CUSTOM ANIMATED START DISCUSSION BUTTON END */

What do you reckon?

EDIT: I also instructed the AI to provide a customized 'Sticky Header Navigation Bar' code to accommodate the [Start a Discussion] button as well.
The AI produced & modified several codes in this respect, although I don't think they're all working properly.

Here's the codes for that:

/* ((10)) CUSTOM NAVIGATION BUTTONS & ICONS BEGIN */
@media (max-width: 767px) {

    .App-primaryControl>.Button--icon,
    .App-titleControl>.Button--icon,
    .App-backControl>.Button--icon {
        width: auto;
        transition: all 0.3s ease-in-out;
        /* Smooth transition for state changes */
    }

    .App-primaryControl>.Button--icon:hover,
    .App-titleControl>.Button--icon:hover,
    .App-backControl>.Button--icon:hover {
        transform: scale(1.1);
        /* Slightly increase the size on hover */
        background-color: rgba(0, 0, 0, 0.1);
        /* Add a subtle background color */
    }

    .Navigation.ButtonGroup.App-backControl>.Button:before {
        content: "👽";
        /* Alien emoji icon */
        float: left;
        position: relative;
        top: -6px;
        width: 45px;
        height: 32px;
        background: url(https://asylum.flarum.cloud/assets/files/2024-08-06/1722900915-108278-img-20240806-111227.png) top left/contain no-repeat;
        display: inline-block;
        transition: all 0.3s ease-in-out;
        /* Smooth transition for state changes */
    }

    .Navigation.ButtonGroup.App-backControl>.Button:before:hover {
        transform: rotate(10deg);
        /* Slight rotation effect */
    }
}

/* ((10)) CUSTOM NAVIGATION BUTTONS & ICONS END */




/* ((11)) CUSTOM NAVIGATION BAR BEGIN */
.App::before {
    background: rgba(0, 0, 0, 0.5) !important;
    /* Semi-transparent black background */
    color: white !important;
    /* White text color */
    font-family: Garamond, serif !important;
    /* Garamond font family */
    font-size: 19px !important;
    /* Font size */
    font-weight: 600 !important;
    /* Font weight */
    transition: background 0.3s ease-in-out;
}

/* ((11)) CUSTOM NAVIGATION BAR END */




/* ((12)) ADDITIONAL CUSTOMIZATIONS */
@media (max-width: 767px) {

    .App-primaryControl>.Button--icon,
    .App-titleControl>.Button--icon,
    .App-backControl>.Button--icon {
        border-radius: 5px;
        /* Rounded corners */
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
        /* Add a glow effect */
    }

    .App-primaryControl>.Button--icon:focus,
    .App-titleControl>.Button--icon:focus,
    .App-backControl>.Button--icon:focus {
        outline: none;
        /* Remove default outline */
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 255, 255, 0.6);
        /* New focus shadow */
    }

    .App-primaryControl>.Button--icon:hover,
    .App-titleControl>.Button--icon:hover,
    .App-backControl>.Button--icon:hover {
        transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
        /* Smooth transitions */
        transform: scale(1.1);
        /* Slightly increase the size on hover */
        background-color: rgba(0, 0, 0, 0.2);
        /* Darker background on hover */
    }

    .Navigation.ButtonGroup.App-backControl>.Button:before:hover {
        transform: rotate(15deg);
        /* Slightly more rotation on hover */
        filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.6));
        /* Add a drop shadow */
    }
}

/* ((12)) ADDITIONAL CUSTOMIZATIONS END */



/* ((14)) STICKY NAVIGATION BAR */
.navbar {
    position: -webkit-sticky;
    /* FOR SAFARI */
    position: sticky;
    top: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    font-family: Garamond, serif;
    font-size: 19px;
    font-weight: 600;
    z-index: 1000;
    /* ENSURES IT ALWAYS STAYS ON TOP */
    transition: background 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    /* SMOOTH TRANSITION FOR BACKGROUND AND SHADOW */
}

.navbar.sticky {
    background: rgba(0, 0, 0, 0.8);
    /* SLIGHTLY DARKER BACKGROUND WHEN STICKY */
    box-shadow: 0 0 5px rgba(212, 175, 55, 0.2);
    /* FAINT GOLD SHADOW ON STICKY */
}

/* ((14)) STICKY NAVIGATION BAR END */

User31

A code for achieving this would be extremely useful for a lot of people

User31

//Update: Managed to move it a little closer by centering it along the header with these munted codes.
Unfortunately it also centers all the discussion list text too...

//HTML FILE//
<div class="nicheforumpfheader">
<div class="logo-holder1">
<a href="/"><img src="/**/" alt="NicheForumPF logo" height="60" width="60">
</div>

//CSS/LESS FILE//
.nicheforumpfheader {
background-position-y: 0px !important;
background-position: center;
background-repeat: no-repeat;
position: relative;
padding: 15px;
background-color: #002747;
text-align: center;
background-image: url("/**/");
}
.nicheforumpfheader a {
font-family : inherit;
font-weight: 600;
text-decoration: none;
color: #fff;
}
.logo-holder1 { padding: 20px;}
.logo-holder1 img {
max-width: 210px;
}
.text-holder1 ul li {
display: inline-block;
padding: 0 16px;
position: relative;
font-size: 14px;
}
.text-holder1 ul li:after {
content: '';
display: block;
width: 1px;
height: 12px;
background-color: #fff;
position: absolute;
right: 0;
top: 4px;
}
.text-holder1 ul li:last-child:after {
display: none;
}
@media only screen and (max-width: 600px) {.nicheforumpfheader {display: none;
}
}