Home › Forums › Porto – Responsive HTML5 Template › Menu colours, adding a header logo above menu and additional wording on slider
- This topic has 8 replies, 2 voices, and was last updated 6 years, 10 months ago by Support2. This post has been viewed 1421 times
-
AuthorPosts
-
May 16, 2017 at 4:14 am #10020970surfersteveParticipant
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
May 16, 2017 at 4:18 am #10020971surfersteveParticipantThis reply has been marked as private.May 16, 2017 at 11:08 pm #10020977Support2KeymasterHello, 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.
May 29, 2017 at 8:52 pm #10021270surfersteveParticipantThis reply has been marked as private.May 30, 2017 at 6:16 am #10021286Support2KeymasterThis reply has been marked as private.May 31, 2017 at 4:20 am #10021307surfersteveParticipantThis reply has been marked as private.June 1, 2017 at 3:20 am #10021326Support2KeymasterThis reply has been marked as private.June 1, 2017 at 4:43 pm #10021336surfersteveParticipantThis reply has been marked as private.June 1, 2017 at 10:46 pm #10021347Support2KeymasterHello 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.
-
AuthorPosts
This topic is marked as "RESOLVED" and can not rceive new replies.