Dynamic Menu

[scotyboy56]

I'm hoping someone can help, I have googled it but I either can't make sense of what they are saying or it just doesn't work the way I'm doing it I think.

 

I am making a website with ASP.net in Visual Studio and have a menu that gets the data from the sitemap file. However how do I get it so that no matter what screen size/resolution I'm using the menu automatically resizes, as I don't want it going across the whole page as personally I don't like that plus I also want the menu centred.

 

My code for the menu:

 

My CSS code for the menu:

nav {
   width: 640px;
   margin: auto;
}

   nav a {
       color: #fff;
   }

.MainMenu {
   width: 640px;
   height: 30px;
   background-color: #BBB2C3;
   border-radius: 12px;
   margin: auto;
}

   .MainMenu ul li {
       width: auto;
       top: 25%;
       padding-left: 5px;
       padding-right: 5px;
       position: absolute;
   }

ul.level1 {
   font-size: 14px;
   font-weight: bold;
   height: 19px;
   line-height: 19px;
   text-align: left;
}

   ul.level1.selected {
       background-color: #160123;
   }

a.level1 {
}

a.level2 {
   background-color: #BBB2C3;
   padding-left: 10px;
   padding-right: 10px;
   padding-top: 5px;
   border-radius: 8px;
   margin-top: 2px;
}

   a.level1:hover, a.level2:hover {
       background-color: #EBADDB;
   }

a.level1.visited, a.level1.visited {
   color: #000000;
}

 

I know it's probably something simple and I'm going to feel like an idiot when it is, but this is one of the last things I need to get sorted before I can get the website up and running. Thanks.

[spadam]

Can you just change the CSS width from 640px to say 50%. You'll need to change it for nav and for Main menu. Does that do what you want?

[scotyboy56]

That's what I ended up doing last night came across it totally by accident, can't remember exactly as files are at home, but on once section I put align left 50% and then on another one put -50% and it went into the centre. Just need to test it on my other machine to make sure it works

[PaulBM]

It's worth looking at Flexbox nowadays. Providing your users are on up to date browsers... I mean not using IE.

 

Can I use... Support tables for HTML5, CSS3, etc

 

Here's a great guide to Flexbox. Once you get your head around the container settings and the child settings it becomes very powerful. It's vital for responsive sites.

 

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[scotyboy56]

It's worth looking at Flexbox nowadays. Providing your users are on up to date browsers... I mean not using IE.

 

Can I use... Support tables for HTML5, CSS3, etc

 

Here's a great guide to Flexbox. Once you get your head around the container settings and the child settings it becomes very powerful. It's vital for responsive sites.

 

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 

Thanks I will have a look into that, looks interesting