ساخت منوی ریسپانسیو

با سلام
قصد دارم یک منوی ریسپانسیو بسازم و لوگوی سایتم وسط صفحه قرار بگیره
اما نمیدونم چطور باید اینکارو انجام بدم
درحالت عادی لوگو وسط میمونه و با کوچک کردن لوگو به خط بعدی میره
چکار کنم که هم زیبایی بیشتری داشته باشه و هم واکنشگرا.
ممنون میشم کسی به من توضیح بده
کد های من به این صورت هست :

    <div class="topnavfram">
        <div class="topnav" id="myTopnav">
            <a href="#">فروشگاه</a>
            <a href="#">دسته بندی</a>
            <a href="#">تماس با ما</a>
            <a href="#">درباره ما</a>
            <a href="#">ورود</a>
            <a href="javascript:void(0);" class="icon" onclick="myFunction()">
            <i class="fa fa-bars"></i>
            </a>
            <a style="" href="#" class="cxdencelogo">
                    <img style="height: 100%;" src="logo/logo1.png">
            </a>
            <div class="searchdiv" id="">
                <button onclick="document.getElementById('mydiv').style.display = 'block'" id="searach-nav">...جست و جو کنید
                    <i style="float: left;margin-right: 15px" class="fa fa-search"></i>
                    </button>
                </div>
            </div>
        </div>