The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> How to align a logo to navigation menu
Grant53787
post Jan 31 2020, 08:21 AM
Post #1





Group: Members
Posts: 3
Joined: 9-May 17
Member No.: 26,404



Hi likely a super simple question for the community, I am trying to align a logo to a navigation menu row, however no matter what I do the logo ends up being in the correct possition horizontally but too high or too high and massive spanning the same width of the navigation bar

Please see images link below, I have currently only got the "Incorrect" result but would like the "correct" result.
https://1drv.ms/u/s!An6nk9vqGPC_hpIO9lB...MKPRWQ?e=ZNilqJ

This is the markup I am trying to edit which returns the "Incorrect" result:

<div class="row">
<div class="col-md-3">
<div class="header-left clearfix">
<div class="logo"> <a href="/"> <img alt="Logo1" id="logo" src="/assets/logo_crisp-b3c19f07667bbc9f267e86129457ee73.jpg"> </a> </div>
</div>
</div>
<div class="col-md-9">
<div class="header-right clearfix">
<div class="main-navigation animated">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" data-target="#navbar-collapse-1" data-toggle="collapse" type="button"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li> <a href="/search-site" style="border: 2px solid #006f48;padding: 5px 9px;margin-top: 7px;color: #006f48;">Search site</a> </li>
<li class="active"> <a href="/">Home</a> </li>
<li> <a href="/panel">Council Members</a> </li>
<li> <a href="/about">About & FAQs</a> </li>
<li> <a href="/terms">Terms</a> </li>
<li> <a href="/contact">Contact</a> </li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 31 2020, 09:00 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



And the CSS that goes with that? The easiest is if you can link to the online page.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Grant53787
post Jan 31 2020, 11:36 AM
Post #3





Group: Members
Posts: 3
Joined: 9-May 17
Member No.: 26,404



QUOTE(pandy @ Jan 31 2020, 09:00 AM) *

And the CSS that goes with that? The easiest is if you can link to the online page.

Sure its: https://www.hpa-uk.org/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 04:56 PM