bootstrap centering issue

AHarvey · 27 Apr 2016 at 01:05

Hi all,

I am being a complete idiot here and more than likely its because I am tired but I am rewriting the website example I was sent by a developer who then disappeared. It's a bootstrap site but has lots of random bits in that don't work the way I want.

It's been years since I did anything half decent web wise and I am just not seeing this. I've spent over an hour on it and just can get it to work. Complete brain fart.

http://something-forever.co.uk/test/

I want the menu items to sit central to the page. That's it. Can I get it to work, can I hell! Can anyone just help me out with this?

thanks in advance and no doubt there will be more questions down the line.

Other than the bootstrap site, any good resources online that really go into depth over the different options? Especially with things like customising bootstrap, accessibility with **** and sr-only tags etc.

Scotty123 · 27 Apr 2016 at 02:15

Could use nav-justified as the class instead of the ul. However this changes the text, padding etc as the selector is set to select a pattern for the menu items based on .navbar .navbar-nav>li>a (the main links e.g. home, info) so you need to change the selectors accordingly so that the elements in the ul are back to what they should be.

I am not a CSS expert however and I concede I could be wrong/there's a better way

.

PHP:

.nav-justified>li>a {
  color: #333131;
  margin: 0;
  padding: 20px;
  font-size: 24px;
}

dmsims · 27 Apr 2016 at 08:45

PHP:

.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}

.navbar .navbar-collapse {
  text-align: center;
}

AHarvey · 28 Apr 2016 at 21:05

Thanks for the help, DMsims solution worked a treat.

However, next issue and I've spent about 4 hours reading and testing new things that i've found online (i really should just learn jquery/javascript myself it'd be faster).

The Carousel. I've got it setup to fade in and out but no matter what I try and do, I can't adjust the speed of the actual transition effect. I'd like to slow it down a little so it's no so harsh.

Any advice?

kaku · 28 Apr 2016 at 23:49

From what I understand, you want to make the images fade more slowly?

Check the CSS transition attribute (.carousel-inner>.item). Increasing transition-duration should be what you're after. Docs are here: https://developer.mozilla.org/en/docs/Web/CSS/transition

AHarvey · 30 Apr 2016 at 01:19

kaku said:
From what I understand, you want to make the images fade more slowly?

Check the CSS transition attribute (.carousel-inner>.item). Increasing transition-duration should be what you're after. Docs are here: https://developer.mozilla.org/en/docs/Web/CSS/transition

Thanks but no matter what I tried, how many examples I found I just couldn't get it to work the way I wanted. I got it fading but it was far too fast.

After 3 days of trying, I came across another CSS3 fader slideshow, adapted it and spent 30 mins trying to figure out things that weren't working. Got it sorted now

EDIT: but now it isn't responsive which is why I took the original one out... :mad:

back to the drawing board until I can figure this out. fixed that and now the text is appearing under the image. Time for bed I think