Drop down nav with logo trouble

HTML-CSS
1

please see

and https://codepen.io/Pavel_NA/pen/dyrvKJr

how do i put a logo (image or text) to the far left and keep my nav to the right

flex-box solution, please :slight_smile:

this maybe simple

i cannot make this work without messing it up :frowning:

i am able to get the nav where i want it, not the logo

i have a problem and need help

many thanks!!!

2

Hello!

Try the following:

  • nav: justify-content: space-between instead of end
  • Adjust padding, text-align and the rest of the styling as needed.

The “space-between” value keeps logo and menu apart.

3

please see

https://codepen.io/Pavel_NA/pen/YzgZRjp

so sorry!
i took your code and applied it

my nav is all the way to the left :frowning:

free space on the right

my goal is to have the logo (text or image) on the left, nav on the right

this code origianly had drop downs, i took them away BUT left the code… is that my problem?

this code is new to me, i am trying

maybe give me a code pen with all i need?

please be clear

do NOT mean to bug you

help me out :slight_smile:

4

Without the logo element, there is nothing to distribute the space between. The two flex items (child elements of the flexbox container) must both be present for the space distribution (space-between) to work.

If you just want to push the .menu to the right you can add a left auto margin on it.

margin-inline-start: auto;
1 Like
5

obvious to me now :slight_smile:

new codepen

[https://codepen.io/Pavel_NA/pen/ZEPKKJK.]

see

nav {
  display: flex;
  justify-content:space-between;
  padding: 3rem;
}

sorry, no go

this wont work either

where is my code off?

this is new to me, sorry if i am missing something!

thanks for your help and patience!

appreciated!

6

Position property fixed , top 0, right 0. Put in the navbar selector.

7

Move the logo element into the nav element and add the left auto margin to the .menu selector.

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.