Home Forums Porto Template Align phone to logo on left side

This topic contains 2 replies, has 2 voices, and was last updated by  tcguide 2 weeks ago. This post has been viewed 60 times

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #10027572

    tcguide
    Participant

    Hello,

    I’d like to align the phone next to the logo on left side on desktop view like:

    And the nav options on right side.

    And on mobile show
    Logo Phone Hamburger Menu

    As you can see I tried a header column and left align text but that is leaving too much space.

    Appreciate any help/suggestion.

    Thanks!



    Template Version: 6.2.1
    #10027574

    Support2
    Keymaster

    Hello,

    My suggestion for you is use only 2 header columns. See the example code below:

    <div class="header-container container">
    	<div class="header-row">
    		<div class="header-column flex-row">
    			<div class="header-logo">
    				<a href="home.html">
    					<img alt="Waterside Interiors" width="111" height="54" data-sticky-width="82" data-sticky-height="40" data-sticky-top="33" src="img/logo.png">
    				</a>
    			</div>
    			<h3 style="text-align:left" class="ml-3 mb-0"><a href="tel:+2392087262">(239) 208-7262</a></h3>
    		</div>
    		<div class="header-column">
    			<div class="header-row justify-content-end">
    				<div class="header-nav">
    					......................
    				</div>
    			</div>
    		</div>
    	</div>
    </div>

    * Note the <div class="header-column flex-row">.
    * Note the phone position and class.
    * Note the <div class="header-row justify-content-end">. This will align the hamburguer menu button on mobile.

    Please, try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    • This reply was modified 2 weeks ago by  Support2.
    #10027577

    tcguide
    Participant

    Thank you! That worked beautifully!


Viewing 3 posts - 1 through 3 (of 3 total)