I created a legend image and have added this with guidance to the index.html as a table after the Div 'Header' and above the div 'nav-bar'. This was then formatted with .css and everything seemed to be great until I realized that the text in the location text boxes was being truncated and you could no longer view all the text for certain locations. Prior to adding the legend I could view all the text included. I am hoping to get some advice on how I might best add that legend image into the header and still be able to view all the location text.
Is there a better place to be adding the image then between the two div elements mentioned above? Or is there a way to alter the application height if it is fixed?
I've attached two screenshots with one showing the legend as an image placed between the Div 'Header' and the Div 'nav-bar'. The second screenshot shows one of the location text boxes where the text is not visible.
I would really appreciate the help. I would love to have a toggable legend but in not having the programming skills being able to add a legend image to the header was going to be the work around.
Thanks in advance,