HTML/CSS Help.

[chocolatecooke]

Hello,
I've been redesigning my site, based on bootstrap (Currently is, just wanted a new design for when I announce the latest features etc)

https://gyazo.com/76ef24727d9b7eba55b2c431b7f3ce96
(I have changed the background color to black and given it z-index 1 so it floats above the logo.)

The cause for this is:
https://gyazo.com/eda7e737217bc31adc4b60e4e58eabee
For having the logo float down a little.
Which was done by: https://gyazo.com/e9f30576731ebedaceef7262c0a4e3ac

That black dot is the collapse symbol and I only seem to have it since I have added an image as the logo and can't seem to find the fix online.

HTML: https://gyazo.com/0b76f5977846aae3c396026854b651dd

It's suppose to look like: (On the current design, just an example) https://gyazo.com/1351662c65d4b094e5d07c626a6966db

I've spent countless hours on this and can't seem to figure out why.

 

[Glitch]

use navbar-brand for the logo

 

[chocolatecooke]

use navbar-brand for the logo

Replace the navbar class with navbar-brand?

 

[Glitch]

"navbar-left logo"

 

[chocolatecooke]

"navbar-left logo"

https://gyazo.com/38c821e2825318acc3036d0b40bf9d32
https://gyazo.com/ab2b7fc86cb46eef720503c3c30b13b4

- Didn't work - Thanks for the suggestion though

 

[Glitch]

it should be only "navbar-brand", not "navbar-brand logo".

Otherwise, I don't know. I don't know how the website is made

 

[chocolatecooke]

it should be only "navbar-brand", not "navbar-brand logo".

Otherwise, I don't know. I don't know how the website is made

the "logo" is to apply the css to the image, so that it does https://gyazo.com/e72531fc9384515b3b820846c60af4ce - That

 

[Glitch]

the "logo" is to apply the css to the image, so that it does https://gyazo.com/e72531fc9384515b3b820846c60af4ce - That

Do you need the line connected to the bottom?

 

[chocolatecooke]

Do you need the line connected to the bottom?

Do I want it to overhang? if so yes, that's the site design i'm going for

 

[Glitch]

Do I want it to overhang? if so yes, that's the site design i'm going for

Use:

.logo {
      position: relative;
      top:  10px;
}

Modify the "top: 10px" until it reaches the bottom

 

[chocolatecooke]

Use:

.logo {
      position: relative;
      top:  10px;
}

Modify the "top: 10px" until it reaches the bottom

https://gyazo.com/13285c0feca7e17794a26cd82ef30618

It does that, could we use discord, so our message count doesn't skyrocket?

 

[Glitch]

https://gyazo.com/13285c0feca7e17794a26cd82ef30618

It does that, could we use discord, so our message count doesn't skyrocket?

Add a few pixels

 

[chocolatecooke]

Add a few pixels

https://gyazo.com/cdb38465c2240eb4d55d0573b37afd6f
Just pushes it down further

 

[Hustle]

I'd recommend purchasing this it will save you a lot of time.

https://bootstrapstudio.io

 

[Glitch]

https://gyazo.com/cdb38465c2240eb4d55d0573b37afd6f
Just pushes it down further

Yeah thats right.

If you want the navbar not to be fat. Make a wrapper for the logo

<div class="logo-wrapper">
        <!--- Logo code here --->
</div>

.logo-wrapper {
      position: absolute;
      top: 0;
      left: 0;
}

.logo {
      position: relative;
      top: 10px;
}

Although, you might need to make media queries to make it responsive

 

[chocolatecooke]

I'd recommend purchasing this it will save you a lot of time.

https://bootstrapstudio.io

More than happy doing it the old fashioned way although I appreciate the thought.[DOUBLEPOST=1517145234][/DOUBLEPOST]

Yeah thats right.

If you want the navbar not to be fat. Make a wrapper for the logo

<div class="logo-wrapper">
        <!--- Logo code here --->
</div>

.logo-wrapper {
      position: absolute;
      top: 0;
      left: 0;
}

.logo {
      position: relative;
      top: 10px;
}

Although, you might need to make media queries to make it responsive

Done exactly that, yet still gets https://gyazo.com/81725d09e4984aa32d3ba4fce64fd5d5 - it's int he wrong place?

 

[Glitch]

Just add more pixels in the "top" to push it down further.

also add a few pixels in the "left"

I recommend using Google's Developer Console to modify the css code directly

 

[chocolatecooke]

Just add more pixels in the "top" to push it down further.

also add a few pixels in the "left"

I recommend using Google's Developer Console to modify the css code directly

I'm talking about the black collapse button, is that what you're talking about?

https://gyazo.com/a42cb666aa005e90b02e3a03ee238e8b

 

[Glitch]

I'm talking about the black collapse button, is that what you're talking about?

https://gyazo.com/a42cb666aa005e90b02e3a03ee238e8b

Do you have a online version of it? I'll check it out

 

[chocolatecooke]

Do you have a online version of it? I'll check it out

Will pm you link.