Вы должны иметь возможность просто добавить его в качестве первого элемента в вашей навигации.(См. Демонстрацию ниже)
Есть ли что-то в этом примере кода, что вы не хотите?Или это то, что вы хотели увидеть?
$('button').click(function(){
$('body').append('<div id="msg">Where would you like to go today?</div>');
});
$('body').on('click', '#msg', function(){
$(this).remove();
});
#msg{position:fixed;top:5vh;left:15vw;padding:1vw;background:wheat;}
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<div class="topnav">
<button>Test</button>
<a class="active" href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
<div style="padding-left:16px">
<h2>Top Navigation Example</h2>
<p>Some content..</p>
</div>
</body>
</html>
Если вы хотите, чтобы он был справа, просто поместите его после тега About <a>.
Но если вы хотите, чтобы это было на правой стороне, с навигацией на левой стороне, вы можете сделать это так:
$('button').click(function(){
$('body').append('<div id="msg">Where would you like to go today?</div>');
});
$('body').on('click', '#msg', function(){
$(this).remove();
});
#msg{position:fixed;top:5vh;left:15vw;padding:1vw;background:wheat;}
.flex-parent{display:flex; justify-content:space-between;}
.flex-child{}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="topnav flex-parent">
<div class="flex-child">
<a class="active" href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
<div class="flex-child">
<button>Test</button>
</div>
</div>
<div style="padding-left:16px">
<h2>Top Navigation Example</h2>
<p>Some content..</p>
</div>
Ссылка:
https://stackoverflow.com/a/56604044/1447509