Question 46068 in CSS Question posted in
Some basic documentation can be found here.

How should I make the navbar to be on the same line with the logo and header – CSS

I want to put them on the same line

I’ve tried float it didn’t work

Tags:

2

Answers


  1. 0

    I can’t say for sure what is the problem unless you show me the html file. Perhaps try to add the following line of code in the .site-heading

      display: flex;

    If tha doesn’t work please provide the html where both logo and navbar are located.

    Login or Signup to reply.
  2. 0

    Please use > display: flex;

    For example, here is the HTML structure of a header(.header-block) which contains
    a) logo
    b) main navigation
    c) client login CTA

    <header class="header-block">
    <div class="site-logo">
        
    </div><!-- / site logo -->

    <div class="navbar">
        
    </div><!-- / main nav area -->

    <div class="client-login">
        
    </div><!-- / client login -->
</header>

    In the CSS you can add following codes –

    .header-block {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    direction: ltr;         /* --- optional --- */
    align-items: center;    /* --- for positioning the child elements vertically center --- */
}

    I hope you will get the desired result.

    Here you can find the example ->
    http://wtaxtest.designshowcase.co.za

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search