Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #603547

    I designed a webpage for a client that had the company logo on the left of the and the the menu to the right of it, taking up the remainder of the websites width and changing accordingly on browser re-size.

    Since then I have purchased your enfold theme and have not been able to achieve the same results.

    Here was my header HTML:

    
    <div class="header">
    				<div>
    					<a href="index.html"><img src="media/cp.png" /></img></a>
    				</div>
    				<div class="nav">			
    					<ul>
    						<li class="ProgramLink" id="MainLinks"><a href="#">PROGRAMS</a></li>
    						<li class="MediaLink" id="MainLinks"><a href="#">MEDIA</a></li>
    						<li class="AboutLink" id="MainLinks"><a href="#">ABOUT US</a></li>
    						<li class="ContactLink" id="MainLinks"><a href="#">CONTACT</a></li>
    					</ul>
    					<hr>
    				</div>
    			<div id="slogan">					
    			</div>
    </div>
    

    And the CSS:

    .header{
        float: left;
        width: 100%;
        z-index: 10;
        position: fixed;
        top: 0;
    }
    #MainLinks{
    	height: 115px;
    }
    #slogan{
    	position: absolute;
    	left: 415px;
    	top: 140px;
    
    	font-size: calc(60vw / 40);
    	font-style: bold;
    }
    .nav {
        width: calc(100% - 398px);
    	position: relative;
    	bottom: 187px;
    	left: 400px;
    }
    .nav ul {
    	width: 100%;
    	height: 100px;
    	list-style: none;
    	margin: 0;
        padding: 0;
    }
    .nav ul li {
        float: left;
    	width: 25%;
    	display: block;
    	line-height: 110px;
    }
    .nav ul li a {
      display: block;
      width: 100%;
      height: 100%;
      text-align: center;
     color: #FFF;
     font-size: calc(80vw / 40);
    font-weight: normal;
    }

    Any Assistance would be very appreciated.

    • This topic was modified 8 years ago by atdm86.
    #603567

    Hi atdm86!

    Thanks for reaching out to us and for purchasing Enfold!

    If I am understanding correctly, you want the logo to the left and the main menu to the right of it in the header. You can go to Enfold -> Header on your dashboard and under Menu and Logo position choose Logo left, menu right.

    Let me know if I misunderstood or if it does not work provide a link to the site and login details. You can place the details in the Private Content section of your reply.

    Regards,
    Jordan

    #610472

    Hi Jordan
    I am aware of the ‘Menu and Logo Position’ attributes inside Enfold -> Header. What it is that I am trying to do is get the menu bar to occupy all of the remaining horizontal space with each top menu item getting equal menu spacing.
    Regards
    Adam

    • This reply was modified 7 years, 11 months ago by atdm86.
    #610523

    Hey!

    Please try the below CSS to make the main navigation a equal spaced menu.

    /* Equal Spaced Menu */
    .av-main-nav {
        display:flex;
        justify-content: space-between;
    }

    Cheers!
    Vinay

    #611064

    I tried using the css provided but was not successful. What I am trying to do is setup the website links so that they are beside the logo and take up the remaining space available in the header.

    • This reply was modified 7 years, 11 months ago by atdm86.
    #612017

    Hey!

    it would require a huge amount of time and customization of the theme and that is why you would need to hire a freelance developer for this job.

    Cheers!
    Andy

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.