CODEWITHSUNDEEP
htmlcss
Joshua
Joshua

Reputation: 649

Elements within navigation resize separately rather than together

One of the biggest problems I have with navigation bars is that, whenever trying to put a logo in with a title, I always find that the image resizes itself to much smaller than the text sooner rather than later.

In the case below, I have a title at one end of the navigation/title bar and an image at the other end. When resizing or even on mobile devices, the image becomes very very small.

The html...

   <div id="nav">
       <p>Crowes</p>
       <img src="pic.jpg" />
   </div>

..and the CSS

#nav { 
            background-color: #7E0E0A; 
            box-shadow: 1px 1px 1px 1px black; 
            padding: 1%; 
            font-size: 5vh; 
            color: white; 
            font-weight: bold; 
            font-family: 'Pacifico'; 
            overflow: auto; 
            width: 100%; 
            z-index: 1;
        }

            #nav p { 
                margin-left: 2%;
                margin-top: 1%; 
                margin-bottom: 1%; 
                float: left;
                color: white;
            }

            #nav img { 
                display: inline-block; 
                width: 6%; 
                vertical-align: middle;
                float: right; 
                border-radius: 50%; 
                border: 2px solid white; 
                margin-right: 3%; 
                opacity: 0.7;
                transition: all 0.2s ease;
            }

Upvotes: 0

Views: 33

Answers (1)

Joshua
Joshua

Reputation: 649

It's not only just changing the size of the elements, it was also their positioning. It all had to be changed to ems rather than %.

(Nav-specific)

#nav { 
            background-color: #7E0E0A; 
            box-shadow: 1px 1px 1px 1px black; 
            font-size: 2.3em;
            color: white; 
            font-weight: bold; 
            font-family: 'Pacifico'; 
            overflow: auto; 
            width: 100%; 
            z-index: 1;
        }

font-size to 2.3em.

(P-specific)

            #nav p { 
                margin: 1.3em;
                display: inline-block;
                vertical-align: middle;
                float: left;
                color: white;
            }

margin to 1.3em

(Img-specific)

            #nav img { 
                display: inline-block; 
                height: 2.3em; 
                vertical-align: middle;
                float: right; 
                border-radius: 50%; 
                border: 2px solid white; 
                margin: 1em; 
                opacity: 0.7;
                transition: all 0.2s ease;
            }

height to 2.3em, as guided by @MrLister and margin to 1em.

Upvotes: 1

Related Questions