Reposition Menu

HTML & CSS
1

I want to place 3 menu links under the video and 2 next to them so it fits into the white space below the video on this home page. http://omelettechef.com/indexNEW.shtml

Please give me the html/css to do this?

Omelette_Chefs_-Caterers_for_Maryland__Virginia__and_Washington__D__C
Omelette_Chefs_-Caterers_for_Maryland__Virginia__and_Washington__D__C2034Ă—2306 701 KB

2

What have you tried?

3

I duplicated the menu then tried to position it next to the current one but it appeared below instead of next to it

4

Assuming you haven’t changed your code again in the last few minutes then you will need the following styles to alter that menu to fit.

.rotator2{height:auto;background:#fff;}
.longtable{display:table;}
#container1 .leftnav{
  width:auto;
background:#fff;
}

#container1 .leftnav ul{
  width:auto;
  display:flex;
  flex-wrap:wrap;
}
#container1 .leftnav ul li{
  width:50%;
}
#container1 .leftnav ul  a{
border-top:1px solid #fff;
color:#fff;
display:flex;
width:auto;
background:#900;
}
#container1 .leftnav ul li:nth-child(odd) a{border-right:1px solid #fff;}

It will then look like this live screenhot.

Screen Shot 2020-12-21 at 19.42.49
Screen Shot 2020-12-21 at 19.42.491330Ă—836 362 KB

As others have mentioned your code is very old school and really needs to be updated to modern standards. You are using magic number techniques that don’t really work. I understand that you may be new to html and css and not able to fully update the code.

We are here to help you if you want to learn but we are not here to offer free code as such and thats why we keep asking what you have attempted so far by yourself. :slight_smile:

3 Likes
5

Thank you
I added the CSS to the home-md.css style sheet but didn’t see the change on the page

6

For me the page looks just like the screenshot in Paul’s last post.

It sounds like you need to clear your browser cache. It is still storing the old css file prior to your changes.

1 Like
7

I can see the changes ok on here http://omelettechef.com/index.shtml

A Ray said you probably need to clear the cache.

I would also clear the double bottom border from that new nav unless you like it.

#container1 .leftnav ul a{
border-bottom:none;
}

It would have been better to create a new nav class for the middle rather than reuse leftnav again as you now have a leftnav in the middle of the page! … and if you apply new rules to leftnav you also change the middle nav in error.

You also need to remove the height on rotator2 and remove the background colour. You will seldom apply heights to elements that hold various text content as you don’t know what that height will be and it will vary between browsers anyway due to different font-sizing and line heights which you haven’t controlled explicitly. Let the content dictate the height and don’t try to force it with fixed heights as it won’t work anyway especially if a user has resized text via their browser controls.

1 Like
8

You’re right…I just checked in another browser and it looks fine

9

Done! thank you for the css snippet and pointing out the duplicate left nav…I wanted to make it easy
I’m afraid to mess up the whole page if I created a new nav class

Thx so much for your help

2 Likes
10

Always make sure you have a full backup before fiddling with anything on the site. That way you can simply restore it if things go wrong. smile And, of course, never work on the live site.

3 Likes
11

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