Menu colours, adding a header logo above menu and additional wording on slider

Home Forums Porto – Responsive HTML5 Template Menu colours, adding a header logo above menu and additional wording on slider

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #10020970
    surfersteve
    Participant

    Hi,

    I would like to do the following please and can’t work out how to do so:

    1. Add a banner logo above my current sticky menu.

    2. Change my menu background color to #c5aa67 (I have done this)

    3. Change the menu font colour to #404041 (I have done this)

    4. Change the menu rollover color to #fff

    5. Change the menu focus color to #fff

    6. Centre the menu items and logo

    7. Add wording to the slider image in the top left of the image with around 50 px padding from the top and left hand side stating Line 1 ‘Test line 1’, line 2 (smaller font) ‘Test line 2’ right aligned with a font color of #404041.

    7. Add additional wording to the slider image bottom right hand corner with padding of around 100 px from the bottom of the image stating Line 1 ‘Coming Soon’, Line 2 (smaller font) ‘Prices Starting From ***’ – This should be in a box with background color #c5aa67, font color #fff, padding of approx. 20 px, text right aligned)

    8. Below the box in 7 (above) I wish to add another box with background color of #404041 and I’d like to add a logo here if possible.

    I have an image of what I am trying to achieve so I will add that privately if possible.

    Thanks,

    Steve


    #10020971
    surfersteve
    Participant
    This reply has been marked as private.
    #10020977
    Support2
    Keymaster

    Hello, thanks for your purchase.

    My suggestion to you, if you want a centered logo and menu, is to use as base the file index-header-center.html(http://preview.oklerthemes.com/porto/5.7.1/index-header-center.html)

    1) Use “index-header-center.html”

    4, 5) Add the code below in css/custom.css:

    .header-nav-main nav > ul > li:hover > a, .header-nav-main nav > ul > li:focus > a {
        color: #FFF;
    }

    7, 8) Change the code of slider to this below:

    <div class="slider-container rev_slider_wrapper">
    	<div id="revolutionSlider" class="slider rev_slider" data-plugin-revolution-slider data-plugin-options="{'delay': 9000, 'gridwidth': 1170, 'gridheight': 500, 'disableProgressBar': 'on'}">
    		<ul>
    			<li data-transition="fade">
    				<img src="img/slides/slide-bg.jpg"  
    					alt=""
    					data-bgposition="center center" 
    					data-bgfit="cover" 
    					data-bgrepeat="no-repeat" 
    					class="rev-slidebg">
    
    				<div class="tp-caption top-label"
    					data-x="50"
    					data-y="50"
    					data-start="500"
    					data-transform_in="y:[-300%];opacity:0;s:500;"
    					style="color: #404041;">Test Line 1</div>
    
    				<div class="tp-caption top-label text-sm"
    					data-x="50"
    					data-y="80"
    					data-start="500"
    					data-transform_in="y:[-300%];opacity:0;s:500;"
    					style="color: #404041;">Test Line 2</div>
    
    				<div class="tp-caption top-label"
    					data-x="right"
    					data-y="bottom" data-voffset="100"
    					data-start="500"
    					data-width="300"
    					data-transform_in="y:[-300%];opacity:0;s:500;"
    					style="color: #FFF; background: #c5aa67; padding: 10px 80px 10px 15px;">
    						Coming Soon<br>
    						<span class="text-md">Prices starting from $$$</span>
    					</div>
    
    				<div class="tp-caption top-label text-sm"
    					data-x="right"
    					data-y="bottom" data-voffset="55"
    					data-start="500"
    					data-width="300"
    					data-transform_in="y:[-300%];opacity:0;s:500;"
    					style="color: #FFF; background: #404041; padding: 10px;">Your IMG LOGO goes here</div>
    			</li> 
    		</ul>
    	</div>
    </div>

    Kind Regards,

    Rodrigo.


    #10021270
    surfersteve
    Participant
    This reply has been marked as private.
    #10021286
    Support2
    Keymaster
    This reply has been marked as private.
    #10021307
    surfersteve
    Participant
    This reply has been marked as private.
    #10021326
    Support2
    Keymaster
    This reply has been marked as private.
    #10021336
    surfersteve
    Participant
    This reply has been marked as private.
    #10021347
    Support2
    Keymaster

    Hello Steve,

    Add this code below in css/custom.css:

    .tp-bgimg {
            background-position: center -60px !important;
    }

    * With this you can control the background image position.

    Kind Regards,

    Rodrigo.


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

This topic is marked as "RESOLVED" and can not rceive new replies.