[strat76]

I’m needing to add a large tagline to the right of the logo basically that spans the top . need the branding section to be list below

LOGO| menu
| large tagline

[strat76]

to clarify that would be LOGO on left.. then Menu across top then large Tagline text below the menu area..

then In mobile view.. logo then tagline then menu.. in stacked vertical arrangement

[Mahesh]

@START76: Please post in your site url.

Regards,
Mahesh

[strat76]

dev.kentuckylake.org

I messed with it some more yesterday and its closer to what im needing..

all i need now is how and where to edit to make the navigation render below the logo in all viewports.. would prefer a solid bar that i can change the bg and maybe add text to that says MENU or something when the hamburger nav pops up.

[Mahesh]

@strat76: Go to Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS box and add the following CSS:

@media screen and (min-width: 661px ) {
    .site-branding .site-logo {
        float: none;
    }
    #site-navigation {
        float: none;
    }
    .site-branding {
        float: none;
    }
}

@media screen and (max-width: 660px ) {
    #site-navigation {
        display: none;
    }
}

Let me know if any problem.

Regards,
Mahesh

[strat76]

perfect..

any way to add a div there to allow me to add text and color to the mobile nav area ? view updated site url and shrink down to like 400, 320 width and see the big white void

also any way to control the logo height as the viewport shrinks ? would like to make taller versions for the smaller ports using different graphics if needed

[Mahesh]

@strat76: Color can be modified with custom CSS. But for adding custom div, text, you’ll need to create a child theme and customize further. You can find more details on creating child theme HERE. If you are not much familiar with coding, I recommend you to hire a customizer.

Regards,
Mahesh

[strat76]

Im already running a modified child theme.. this theme is not using the standard core files to set the layout. Its using a file within called structure.php with a ton of hooks and calls .. i am fine and seasoned in css and html but not so much in php and js in order to add the div i need to know how to safely edit the structure to make the new div with the nav block

[strat76]

ok so ive managed to tweek it a lil more and its ALMOST there.. i’ve editted the inc/structure.php in my child theme but its not overriding the parent structure.php

i see this line of code in the parent ..
<div id=”mobile-header”>
<span class=”mobile-menu-text screen-reader-text”>Menu</span>
</div>

yet i don’t see the text “Menu” showing when the mobile menu renders..

I added my own div with text to my child structure.php but nothing of course because its not overriding the parent one ..

help please

mission here is to add TEXT beside the menu icon that says MENU>>

[Mahesh]

@strat76: Add the following code in your child theme’s functions.php. Add the styles as necessary for you.

function fabulous_fluid_mobile_header_menu() {
		?>
		<div id="mobile-header">
		    <a id="responsive-menu-button" href="#sidr-main"><span class="mobile-menu-text screen-reader-text"><?php esc_html_e( 'MY MENU', 'fabulous-fluid' ); ?></span></a>
		</div>
		<div class="custom-text">
			<span>Some Text</span>
		</div>
		<?php
	}

Regards,
Mahesh

[strat76]

i copy pasted exactly as you have and it breaks the site and leaves me at a blank white page

[strat76]

scratch that got it

[Mahesh]

@strat76: Glad to know you got it working. Have a nice day!

Regards,
Mahesh

[strat76]

you’ve been beyond helpful.. thanks It’s looking perfect..

any idea how to make the .site dynamically move below the fixed masthead? currently when i resize to smaller viewports a white gap opens .. hate to have to make a ton of queries to adjust the .site margin as its gapping way too frequent.

i tried a jquery script i found that was supposed to read the masthead height and add 20px to calculate the new .site padding but it didnt work ..

any ideas

[Mahesh]

@strat76: Sorry for the late reply. Please add the following CSS:

@media screen and (min-width: 917px) and (max-width: 1264px) {
    .site {
        margin-top: 314px;	
    }
}

Hope this helps.

Regards,
Mahesh

[strat76]

thanks again manesh

ran into another 2 questions.

any way to force the logo area to go smaller height at certain smaller screens? when i rotate my s4 horizontal the logo height is practically pushing my content off screen and i have fixed masthead. ** if there isnt a way .. can we make the navbar only fixed as the page scrolls down and let the logo go away **

2 ) best and safest way to add a secondary alternate sidebar for the site

[Mahesh]

@strat76:
1. For logo issue, add the following CSS:

#masthead .site-branding .site-logo img {
    width: 100%;
}

2. Secondary alternate sidebar:
You mean to have two sidebars at the same time? Or different sidebars for different pages? If its the latter one, I recommend you to upgrade to Pro version. The Pro version has 3 Optional sidebars and many others too.

Regards,
Mahesh

[mindfulsami]

@mahesh
Hi! I was wanting to do something similar to what this guy is doing but what he did was no posted in here, I dont believe. Didnt want to make a new post, but i can if you want me to.

Here is what im looking to do:
Either change the “blue” box to a different color in the logo area, or have what that guy has – a stationary custom navigation banner sort of thing.

I hope that makes sense!
Thanks for all the support you give!!!
http://www.BeMindfulYoureCreative.com

[Mahesh]

@mindfulsami: Go to Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS box and add the following CSS:

.site-branding, 
.site-header .social-networks li .fa-search {
	background-color: transparent;
}

.site-branding .site-title a, 
.site-branding .site-description {
	color: #fff;
}

#masthead {
    background-color: #0d223f;
}

Regards,
Mahesh

[mindfulsami]

Wow awesome! thank you so much!!! i want to buy you a coffee. what is your paypal 🙂

[Author]

Posts