Remove padding from left of Navbar

Archetypon
1

Hi there,

I want to align my Navbar menu so that its first item is left ranged with the content below. At the moment there’s some padding on the left and I cannot remove it. Both the Navbar and the content are in containers that are the same size and they need to stay that way so they remain relative to each other. I can’t move the Navbar out of its container or it goes full width, which doesn’t work, and I can’t resize the container by a smidge to compensate and even if I could it would be relative to the page and not the other container… Any way to do this you can think of?

I tired inspecting element to get the class of the navbar item but altering that with css disn’t work either.

Thanks

2

Not really sure what you’re trying to do.

For starters, try adding uk-margin-remove to the class of the containers. Failing that can you give me a link so i can see what is happening and make an image explaining what you want to do?

EDIT: Do you mean the fact that the text in the first menu item isn’t aligned with the text on the filter buttons below…

09

If so, align the content in the menu buttons to the left.

3

Hi Steve,

Exactly that, but the menu ‘items’ don’t have any options for alignment or even an advanced button to add a custom class. The whole group are in the ‘Left’ menubuilder field but that’s all there is?

R

4

What you want to doing is remove the left padding from the menu items. This is the css you need to play with…

.uk-navbar-item, .uk-navbar-nav>li>a, .uk-navbar-toggle {
padding: 0 15px 0 0;
}

You can most likely remove some of those classes, but you’ll need to drill down to work out which actual class is the one to apple change to.

For consistency you’ll need to apply this globally, otherwise the menu will look different on the other pages. Doing that might throw up issues elsewhere though.

Personally, I prefer it with the two rows of links not being aligned. It sets a defined difference between the menu and the page content, but horses for courses.

There might be other ways to do this, without the css, but without a copy of the project it’s difficult to work it out, as I can’t see what other stacks you’re using which might have an impact on things.

BTW: The site is coming together nicely. I think splitting things into separate pages works well.

5

Cheers Steve,

The client is a stickler for alignment (to say the least!) and so it will have to be sorted. I recognise some of those classes from my own exploration but couldn’t get it working. I’ll try again now I know I was on the right track.

There’s a lot to do on the site but this is a proof of concept thing and so far it’s been MUCH easier to get what I wanted to work in UIKit, so Kudos to @Lucas for that. Apart from the Elevator stack from Joe and probably a couple of BWD stacks later it’s 99% UIKit so far.

Thanks
R