The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Nav menu help!, issue with placing logo next to menu names
CosmicWeb
post Jul 7 2019, 02:40 PM
Post #1





Group: Members
Posts: 3
Joined: 7-July 19
Member No.: 26,930



Hi,

Just joined this forum in hope someone can help me as I can't tear anymore hair out from frustration.

I bought a web hosting template from themeforest as I loved the layout for my upcoming web hosting project.
But the logo I want displayed won't sit on the same line as the menu names, I had emailed the author of the template, he was willing to help but for an extra cost of £50, which I thought was a lot of money for something clearly simple for someone who could fix it within a minute or two, anyway I decided to try and look myself but after a month I came to a complete stop as I couldn't find anything, so hopefully someone here can be so kind enough to guide me.

Here is the code.

<!-- Main Menu -->




<div class="main_menu">

<div class="row">
<div class="container">

<div class="col-sm-8">
<nav id="desktop-menu">

<ul class="sf-menu" id="navigation">


<br>
<body>
<a href="index.html"><img src="images/whitelogo.png" alt="" height="180" width="180"></a>
<li> <a href="#">Web Hosting</a>
<ul>
<li> <a href="shared-servers.html">Shared Hosting</a>
<ul>
<li> <a href="shared-servers.html">Shared Servers Based</a> </li>
<li> <a href="shared-period.html">Shared Period Based</a> </li>
</ul>
</li>
<li> <a href="vps-slider-4-plans.html">VPS Servers</a>
<ul>
<li> <a href="vps-slider-3-plans.html">3 Plans Slider</a> </li>
<li> <a href="vps-slider-4-plans.html">4 Plans Slider</a> </li>
<li> <a href="vps-slider-5-plans.html">5 Plans Slider</a> </li>
<li> <a href="vps-slider-6-plans.html">6 Plans Slider</a> </li>
</ul>
</li>
<li> <a href="servers.html">Dedicated Servers</a> </li>
<li> <a href="cloud.html">Cloud Servers</a> </li>
<li> <a href="servers.html">Servers</a> </li>
</ul>
</li>


<li> <a href="domain-pricing.html">Domains</a>
<ul>
<li> <a href="domain-pricing.html">Domain Pricing</a> </li>
<li> <a href="domain-offers.html">Domain Offers</a> </li>
</ul>
</li>
<li> <a href="#">Pages 1</a>
<ul>
<li> <a href="about.html">About</a> </li>
<li> <a href="faq.html">FAQ</a> </li>
<li> <a href="login.html">Login</a> </li>
<li> <a href="login-popup.html">Login Popup </a> </li>
<li> <a href="register.html">Register</a> </li>
<li> <a href="resetpassword.html">Reset Password</a> </li>
<li> <a href="privacy.html">Privacy</a> </li>
<li> <a href="terms-of-service.html">Terms of Service</a> </li>
<li> <a href="progress.html">Progress</a> </li>
<li> <a href="action-boxes.html">Action Boxes</a> </li>
<li> <a href="#">Blog</a>
<ul>
<li> <a href="blog-category.html">Category</a> </li>
<li> <a href="blog-single.html">Single</a> </li>
</ul>
</li>
<li> <a href="contact.html">Contact</a> </li>
<li> <a href="elements.html">Elements <span class="left-badge-color-1 ">All</span></a> </li>
</ul>
</li>
<li> <a href="#">Pages 2</a>
<ul>
<li> <a href="domain-forsale.html">Domain For Sale</a> </li>
<li> <a href="maintance.html">Maintance</a> </li>
<li> <a href="popup-newsletter.html">Newsletter Popup</a> </li>
<li> <a href="datacenter.html">Datacenter</a> </li>
<li> <a href="cookie.html">Cookie Message</a></li>
<li> <a href="error2.html">Error 2</a> </li>
<li> <a href="error1.html">Error 1</a> </li>
<li> <a href="gallery.html">Gallery</a></li>
<li> <a href="sections.html">Sections</a> </li>
<li> <a href="sections-sizes.html">Section Sizes</a> </li>
<li> <a href="section-colors.html">Section Colors</a> </li>
<li> <a href="animations.html">Sample Animations</a> </li>
<li> <a href="cart.html">Cart</a> </li>
</ul>
</li>
<li> <a href="#">Trending Pages</a>
<ul>
<li> <a href="affiliates.html">Affiliates</a> </li>
<li> <a href="domain-offers.html">Domain Offers </a> </li>
<li> <a href="gsuite.html">GSuit</a> </li>
<li> <a href="ssl.html">SSL</a> </li>
<li> <a href="sitelock.html">SiteLock</a> </li>
<li> <a href="cloudflare.html">CloudFlare</a> </li>
<li> <a href="wordpress.html">wordpress</a> </li>
<li> <a href="codeguard.html">CodeGuard</a> </li>
<li> <a href="website-builder.html">Website Builder</a></li>
<li> <a href="domain-forsale.html">Domain For Sale</a></li>
<li> <a href="maintance.html">Website Maintance</a></li>
<li> <a href="comingsoon.html">Coming Soon</a></li>
<li> <a href="compare-plans.html">Compare Plans</a> </li>
</ul>
</li>
<li> <a href="contact.html">Offers</a>
<ul>
<li> <a href="combo-plans.html">Combo Plans <span class="left-badge-color-1 ">Best</span></a></li>
<li> <a href="promocode.html">Promo Codes</a></li>
<li> <a href="domain-offers.html">Domain Offers</a></li>
<li> <a href="offer-header.html">Header Offer</a></li>
<li> <a href="offer-request.html">Offer Request</a></li>
<li> <a href="domain-forsale.html">Domain For Sale</a></li>
</ul>
</li>
</ul>
</nav>
</div>

</li>
</ul>
</div>
</div>
</div>
</div>
<!-- End of Main Menu -->

The website is https://cosmicwebhosting.co.uk/Light/index.html
I have a ready to go template in my main folder but wanted to use this one.

Many Thanks for anyone that can stop me from stressing.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 7 2019, 05:43 PM
Post #2


.
********

Group: WDG Moderators
Posts: 8,216
Joined: 10-August 06
Member No.: 7



The HTML structure is incorrect:

CODE
<ul class="sf-menu" id="navigation">


<br>
<body>
<a href="index.html"><img src="images/whitelogo.png" alt="" height="180" width="180"></a>
<li>

--a UL element can only contain LI elements as direct child elements (LI in turn can contain many others though), and BODY can only be contained in the root HTML element (along with HEAD). Also it seems to be an extra DIV end tag.

See also the Simple HTML template here: https://dev.w3.org/html5/html-author/#basic-templates
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CosmicWeb
post Jul 8 2019, 08:22 AM
Post #3





Group: Members
Posts: 3
Joined: 7-July 19
Member No.: 26,930



QUOTE(Christian J @ Jul 7 2019, 05:43 PM) *

The HTML structure is incorrect:

CODE
<ul class="sf-menu" id="navigation">


<br>
<body>
<a href="index.html"><img src="images/whitelogo.png" alt="" height="180" width="180"></a>
<li>

--a UL element can only contain LI elements as direct child elements (LI in turn can contain many others though), and BODY can only be contained in the root HTML element (along with HEAD). Also it seems to be an extra DIV end tag.

See also the Simple HTML template here: https://dev.w3.org/html5/html-author/#basic-templates



Thank you for getting back to me, to be honest I haven't a clue where to start to fix the menu, I was going to look in to purchasing a responsive menu, would that still work with my template?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 8 2019, 08:37 AM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,366
Joined: 9-August 06
Member No.: 6



Just remove the BODY tag and the BR tag and put the link in the LI. Assuming you have another BODY tag where it should be.

CODE

<ul class="sf-menu" id="navigation">
   <li>
      <a href="#">Web Hosting</a> <a href="index.html"><img src="images/whitelogo.png" alt="" height="180" width="180"></a>
      <ul>
      ...


Or maybe you want the link text and the logo in the same link?

CODE

<ul class="sf-menu" id="navigation">
   <li>
      <a href="index.html">Web Hosting <img src="images/whitelogo.png" alt="" height="180" width="180"></a>
      <ul>
      ...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 8 2019, 09:17 AM
Post #5


.
********

Group: WDG Moderators
Posts: 8,216
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Jul 8 2019, 03:37 PM) *

Just remove the BODY tag and the BR tag and put the link in the LI. Assuming you have another BODY tag where it should be.

Yes there's another one on line 33 on the live page.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 8 2019, 09:24 AM
Post #6


.
********

Group: WDG Moderators
Posts: 8,216
Joined: 10-August 06
Member No.: 7



QUOTE(CosmicWeb @ Jul 8 2019, 03:22 PM) *

Thank you for getting back to me, to be honest I haven't a clue where to start to fix the menu,

The page layout is done with CSS, alas there are 12 CSS files on the page to analyze. Once you've fixed the HTML errors we can take a look at the CSS. Perhaps it's a simple as putting the logo image+link in an LI element:

CODE
<li><a href="index.html"><img src="images/whitelogo.png" alt="" height="180" width="180"></a></li>
<li> <a href="#">Web Hosting</a>

but I haven't tested.

QUOTE
I was going to look in to purchasing a responsive menu, would that still work with my template?

Impossible to say without looking at both. But in general it's tricky to mix readymade code from various sources.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 8 2019, 07:36 PM
Post #7


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,366
Joined: 9-August 06
Member No.: 6



Ack, I didn't scroll far enough to see the link to the live page. Anyhow, if you are satisfied with the look and just can't get you icon right, all you need to do is what I said above.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CosmicWeb
post Jul 9 2019, 06:06 AM
Post #8





Group: Members
Posts: 3
Joined: 7-July 19
Member No.: 26,930



QUOTE(pandy @ Jul 8 2019, 07:36 PM) *

Ack, I didn't scroll far enough to see the link to the live page. Anyhow, if you are satisfied with the look and just can't get you icon right, all you need to do is what I said above.



It worked thank you! I think that's the best I'm going to get it, just need to change the link colour black to how I want.
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: 16th September 2019 - 07:24 AM