Skip to main content
H
hourtayter
Known Participant
March 13, 2019
Question

Nav bar with centred logo and social media icons?

  • March 13, 2019
  • 4 replies
  • 5308 views

Hopefully one of the good people of this forum can help me out with a question about navigation menus - I'm looking to create a responsive navbar for a friends website that has it's logo centred, and has social media icons as part of the menubar as well as text (unless it's better practise to have them as icons at the footer of the website?), so it would kind of look like

Food - Location - Logo - Logo - contact - Twitter icon - Facebook icon

which can then collapse down to the "hamburger" icon for mobile/smaller screen widths

Still working in Dreamweaver CS5 if that matters by the way!

Any hope/advice appreciated!

Simon

This topic has been closed for replies.

4 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
March 14, 2019

You asked for a navbar with centered logo that is responsive on smaller devices.  I gave you what you asked for using a Bootstrap document.  However it won't work without Bootstrap and jQuery source files.  See screenshot of the responsive (hamburger) menu.

Bootstrap is an open source framework.  You don't have to have the latest version of DW to use it.  But it makes things much easier if you do.  

Bootstrap 4 Tutorial

Your example site is made on Squarespace (Holy excessive code, Batman!!!).   Also it's not quite what you described originally.  It has a header block with a centered logo.  Below the header is a navbar.  

Of course this is all doable with Bootstrap or plain vanilla code (your choice).  But you must understand how to build responsively and be up to speed with the  latest HTML, CSS and JavaScript standards.   CS5 is outdated software.  It won't help you with modern coding practices. 

Nancy O'Shea— Product User & Community Expert
    H
    hourtayterAuthor
    Known Participant
    March 14, 2019

    Well unfortunately the latest version of Dreamweaver isn't affordable for long periods (thank you Adobe) as I don't use it enough to justify the cost so I'm just trying to do the best with what I've got and/or can afford.

    It is good that this forum exists so users here can point out the more intricate ways that websites are now built, such as the example I mentioned especially for those of us like myself who only dip into it on a need to do basis which isn't regularly and therefore it can be tricky to find time outside of work to try and catch up with everything that goes on and how to utilise it best – and Squarespace having excessive code certainly isn't a shocker!

    So how is that kind of menu best achieved with vanilla code? I will have a look at the Boostrap link in your reply too, thank you

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    March 14, 2019

    hourtayter  wrote

    and Squarespace having excessive code certainly isn't a shocker!

    I know.   I only mentioned it for the benefit of certain folk around here who complain  about Bootstrap being excessive .

    Vanilla JS

    Basic Responsive Navigation #2 with Vanilla JS

    Nancy O'Shea— Product User & Community Expert
    H
    hourtayterAuthor
    Known Participant
    March 14, 2019

    osgood_​ Nancy OShea​ thanks to both for the replies so far – I haven't got the latest version of Dreamweaver so I'm not able to access that Bootstrap?

    Two things about Osgoods reply is that the menu doesn't go down into a hamburger type menu when the screen is shrunk down, it needs to do this so the logo is still showing but the other options are in the hamburger icon menu

    Also with both methods the menu items aren't equally spaced out across the navbar itself, is there a way to do this please?

    Thanks!

    H
    hourtayterAuthor
    Known Participant
    March 14, 2019

    This is the kind of menu bar I'm looking to achieve to give one of quite a few examples out there!

    https://aruleoftum.com/burger-shop-hereford

    O
    osgood_
    Legend
    March 14, 2019

    Below is an alternatiive solution without Bootstrap.

    Line for line you will find its less code than Bootstrap uses if you care to disect the Bootstrap css file and js file.

    The code is an isolated component where you should be able to change the css properties to style the navigation quite easily WITHOUT having to introduce more css than is necessary as you do when re-styling the default Bootstrap ones to meet your own requirements, which leaves lots of redundancies attached to your page, bad practice.

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8" />

    <title>Centered Nav</title>

    <style>

    * {

    box-sizing: border-box;

    }

    body {

    margin: 0

    }

    .main-nav {

    display: flex;

    justify-content: space-between;

    align-items: center;

    width: 90%;

    margin: 0 auto;

    background-color: #000;

    padding: 0 30px;

    }

    .main-nav ul {

    display: flex;

    margin: 0;

    padding: 0;

    }

    .main-nav li {

    list-style: none;

    margin: 0;

    padding: 0;

    }

    .main-nav a {

    display: block;

    text-decoration: none;

    padding: 10px;

    color: #fff;

    }

    .logo {

    color: #fff;

    }

    .toggle-nav {

    display: none;

    }

    @media screen and (max-width: 768px) {

    .main-nav {

    flex-direction: column;

    width: 100%;

    }

    .logo {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    order: -1;

    }

    .main-nav ul {

    display: none;

    }

    .toggle-nav {

    display: block;

    }

    .main-nav ul {

    width: 100%;

    }

    .main-nav a {

    width: 100%;

    text-align: center;

    border-top: 1px solid #fff;

    }

    }

    </style>

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <script>

    $(document).ready(function(){

    $('.toggle-nav').css('cursor' , 'pointer').click(function(){

    $('.main-nav ul').slideToggle();

    });

    $(window).resize(function() {

    var width = $(document).width();

    if (width > 768) {

    $('.main-nav ul').css('display','flex');

    }

    if (width <= 768) {

    $('.main-nav ul').css('display','none');

    }

    });

    });

    </script>

    </head>

    <body>

    <nav class="main-nav">

    <ul>

    <li><a href="#">Food</a></li>

    <li><a href="#">Location</a></li>

    </ul>

    <div class="logo">

    <h4>Logo</h4>

    <div class="toggle-nav"><i class="fas fa-bars"></i></div>

    </div>

    <ul>

    <li><a href="#">Contact</a></li>

    <li><a href="#">Icon</a></li>

    <li><a href="#">Icon</a></li>

    </ul>

    </nav>

    </body>

    </html>

      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      March 13, 2019

      I wrote a document on this  below. 

      Bootstrap 4.2.1 Navbar with Centered Brand/Logo

      Your social icons could go on either side of logo or in your footer.  It's your choice.   Personally I put less important content below the fold.

      Nancy O'Shea— Product User & Community Expert
        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices