Bootstrap 768px to 991px Breakpoint Nav Issue

JavaScript
1

Hi guys,

I am Bootstrap newbie and I am just getting the layout sorted on a website, including the responsive set up.

The test link is here –

http://www.leedsinkcartridges.co.uk/testrs/index.html

I have it all as I want it, except in iPad Tablet Portrait covering the media points 768px to 991px.

I would like to stack the logo in the centre and drop the navigation under it, or have the mobile hamburger kick in.

Dropbox link to the files is here -

https://www.dropbox.com/s/m5jy0mt5j8qy8wd/BootstrapDB.zip?dl=0

The Bootstrap CSS is version v3.3.2

The CSS for the site is a bit of a mess at the moment, so apologies for that!

Any ideas how I would go about it?

Thanks,
Dave.

2 
@media (min-width: 768px)
.site-navigation {
  /* position: absolute; */
  /* top: 50%; */
  /* right: 20px; */
  transform: translate(0, -50%);
  -webkit-transform: translateY(-50%);
}

Remove those commented out properties. Those should not be positioned absolutely anyway.

You’ll have some vertical alignment to do from there but that gets it stacking and gets the nav in the flow of the document.

3

Hi Ryan,

Just to confirm is this in the Bootstrap CSS file or the Styles.css file?

Thanks,

Dave.

4

Hi Ryan,

It’s ok I found it in styles.css file.

I will give it a try and let you know.

Thank you very much.

Dave.

5

Hi Ryan,

Thanks I can see how that allows me to put the logo above the nav bar.

Can you help me with how I would get the hamburger menu to show between these 2 points instead of the nav links?

Kind regards,

Dave.

6

Your Javascript adds a class to hide the menu links and hten show the hamburger. That javascript would need to be modified to show the hamburger at a bigger screen width and also hide the menu links at a bigger screen width. Very simple stuff but I’m moving this to the JS forum for now for them to look at.

7

Hi Ryan,

Thank you for your help.

I have no idea about Javascript at all, so I need all the help I can get!

Kind regards,

Dave.

9

Hi Ryan,

I have managed to get it to the this stage after 2 hours with it last night, please see dropbox files, however it’s not aligning to the centre in the traditional fashion where I would use margin auto on the right and left.

Dropbox files - https://www.dropbox.com/s/cxn91itr8ek2d9k/ipad_portrait.zip?dl=0

I think it might be better to go with the collapsed hamburger nav between these break points.

If you could help me with this, that would be great.

Thanks,

Dave.

10

Hi Ryan,

This is not a JavaScript issue as I have the CSS almost working to get the hamburger menu working.

You can close the topic and I will follwo up with the issue.

Thanks so far,

Dave.

11

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