Logo Picture as menu background?

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
Post Reply
lifecrane
 
 
Posts: 7
Joined: Sun Nov 04, 2018 12:12 am

Logo Picture as menu background?

Post by lifecrane » Wed Nov 07, 2018 2:12 pm

Sorry, I searched and this might look easy for many of you, but I cant figure this out, an dthe more I look into this, the more my layout is broken :D ..thus;
in the wb14 basic 2 template, it has a wider text menu on the right, smaller block in the left.. I tried to make my logo the background of left menu bar but could not make it work...So I deleted it, and inserted image (not place holder, image.. ) Then It was there perfectly..the logo is wider then the menu background bar (taller about 150 pixels..), so it was overlaying nicley to the carousel area.. It got messed up and I dont know how :roll: :shock: :D ..Now the picture is all over the place, and even when I delete or undo, I choose insert again, its behing the menu bar... So I choose move up? and nothin g happens....

Any help is greatly appreciated... the page in question is here for a bit, then must stop the nodejs and mongoose server out of my laptop.. https://dry-newt-79.localtunnel.me ... please don't hack my laptop :) eheheh I put the logo back has background of that small left block, and put a temp red line, hopefully someone can help me...
The logo as is , show up too small, and i wanted it taller than the menu bar, overlapping to the carousel area... :mrgreen: :? how can i do that? say put a logo of about 150 pixels by 150, or something like that?

TIA

http://pasted.co/66002054



<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Template 2</title>
<meta name="keywords" content="anxiety, mental health, addiction, depression, RX, psychology, psychiatry">
<meta name="author" content="Joao Vieira">
<meta name="generator" content="@@@@gmail.com">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="font-awesome.min.css" rel="stylesheet">
<link href="great_look.css" rel="stylesheet">
<link href="wb14_basic2.css" rel="stylesheet">
<script src="jquery-1.12.4.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="transition.min.js"></script>
<script src="collapse.min.js"></script>
<script src="dropdown.min.js"></script>
<script src="carousel.min.js"></script>
<script src="skrollr.min.js"></script>
<script>
$(document).ready(function()
{
$("a[href*='#header']").click(function(event)
{
event.preventDefault();
$('html, body').stop().animate({ scrollTop: $('#header').offset().top }, 600, 'easeOutBack');
});
$(document).on('click','.ThemeableMenu1-navbar-collapse.in',function(e)
{
if ($(e.target).is('a') && ($(e.target).attr('class') != 'dropdown-toggle'))
{
$(this).collapse('hide');
}
});
$.fn.bootstrapcarousel.Constructor.TRANSITION_DURATION = 600;
$("#Carousel1").bootstrapcarousel({interval:4000});
$("a[href*='#section1']").click(function(event)
{
event.preventDefault();
$('html, body').stop().animate({ scrollTop: $('#section1').offset().top }, 600, 'easeOutBack');
});
$("a[href*='#section3']").click(function(event)
{
event.preventDefault();
$('html, body').stop().animate({ scrollTop: $('#section3').offset().top }, 600, 'easeOutBack');
});
$("a[href*='#section2']").click(function(event)
{
event.preventDefault();
$('html, body').stop().animate({ scrollTop: $('#section2').offset().top }, 600, 'easeOutBack');
});
$("a[href*='#FlexContainer1']").click(function(event)
{
event.preventDefault();
$('html, body').stop().animate({ scrollTop: $('#FlexContainer1').offset().top }, 600, 'easeOutBack');
});
function skrollrInit()
{
skrollr.init({forceHeight: false, mobileCheck: function() { return false; }, smoothScrolling: false});
}
skrollrInit();
});
</script>
<script src="wb14_basic2.js"></script>
</head>
<body>
<div id="header">
<div id="wb_ThemeableMenu1">
<div id="ThemeableMenu1" class="ThemeableMenu1" style="width:100%;height:auto !important;">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".ThemeableMenu1-navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="ThemeableMenu1-navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="">
<a href="#section2">Big Picture</a>
</li>
<li class="">
<a href="#section3">History</a>
</li>
<li class="">
<a href="#FlexContainer1">New Approach</a>
</li>
<li class="">
<a href="#pricing">Programs</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="wb_Image4">
<img src="images/small_li_flat.png" id="Image4" alt="">

User avatar
Pablo
 
Posts: 14518
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Logo Picture as menu background?

Post by Pablo » Wed Nov 07, 2018 2:46 pm

This template uses a flex container for the header, the default 'logog' is a heading object. The flex properties of this heading are set to flesgrow: 1, flex shrink:1

If you are new to flexbox then I recommend to read the related tutorials or use a standard page header or layout grid instead.

lifecrane
 
 
Posts: 7
Joined: Sun Nov 04, 2018 12:12 am

Re: Logo Picture as menu background?

Post by lifecrane » Wed Nov 07, 2018 3:22 pm

fair enough, will do.... I thought the layer index at Z axis placement would bring the logo upwards to the top,even over the menu background bar, where it displayed correctly for a few times, until went bezerk.. Also saw some other posts , like this one.. https://www.wysiwygwebbuilder.com/forum ... ox#p415325 thanks for your reply.
I am going to have a cup of coffee, reboot my laptop, maybe a shot of tequila or whiskey, and at it again... :)

tx again, great software indeed.. Showed this to my twins yesterday, and they liked it..

Post Reply

Who is online

Users browsing this forum: bkjohns and 8 guests