Help needed tweaking some things that look strange...

tpsphi · March 2015

Hi Team!

Thanks for building such an amazing and well supported theme. I am recommending it to everyone who I meet.

I spent a lot of time working with your great documentation but I've hit a few walls. I have 5 tweaks that are needed after soft launching the site. The site URL is here: bit.ly/1BnBl7G

ISSUE #1: HEADER IMAGE ALIGNMENT

As you will notice the header has an image on the far left. When I resize to different devices the header becomes harder to see, and the face gets cut off. I would like the face to always be visible if possible. How do I set the image alignment so that the left side is always visible?

ISSUE #2: MOVE LOGO POSITION

As you will notice, the logo is over top of her face as well. When you scroll the logo shows up nicely in the persistant nav bar at the top (great idea btw!), and that is perfect. But I would like the logo to not be on her face, before anyone scrolls. Can we move the position in the full header? Here is a link to an image that shows you where I'd like to place the logo: http://bit.ly/1B9S9QB How would I do that?

ISSUE #3: PHONE NUMBER ALIGNMENT

First of all, I have a past discussion I just replied to over here: http://forum.muffingroup.com/betheme/discussion/3482/adjusting-logo-and-phone-number-position-be-theme which is related to this issue. I'm looking to move the phone number off her face in the header and to the right side with the social icons.

ISSUE #4: HTML ANCHORS

When you hover over the 'Classes' menu option in the nav, it will show you a few dropdowns. I would like each of these sub-menu items to send the visitor to the /classes page, but at the right part of the page (for each class). I tried to use html anchors but had no luck. Can you let me know the best way to do this?

ISSUE #5: QUOTES HAVE UNDERLINES

Whenever I quote text it puts underlines under the text. You can see this on the 'Testimonials' page for example. How can I remove the underline from quotes?

I would really appreciate your help in sorting these out, and any advice you have would be very helpful!

Thanks again for your amazing support!

Go BeTheme Go!

TPSphi

Albert · March 2015

Hi,

Thank you for your kind words!

1. To change image atachment paste below code in Custom CSS field

body:not(.template-slider) #Header_wrapper { background-position: left top;}

2. Please paste below code in Custom CSS field

@media only screen and (min-width: 768px){
#Top_bar:not(.is-sticky) .logo { left: 160px; position: absolute; top: 60px;}
}

3. Please paste below code in Custom CSS field

#Action_bar .contact_details { float: right;}

4. To do this please use links like: /classes#your-section-id-1
And on the classes page create sections with the same ids

5. Please paste below code in Custom CSS field

blockquote { background:none;}

Thanks!

tpsphi · March 2015

WOW that was fast!!! Thank you so so much

It all worked flawlessly. Amazing Support!

Two quick followup questions

FOLLOWUP #1

How do I make the telephone number darker? Where would I change that colour, and would changing that colour affect any other area on the site for other links? I'd like the link/phone number to be black.

FOLLOWUP #2

The sub-menu for the classes works great now! I noticed though that the anchor is behind the nav bar. So if I choose Basic SRT it will scroll so that Basic SRT is behind the nav bar (instead of below it). How do I adjust this so that the scroll will have the section show below the nav bar (so nothing gets cut off?

Thanks again for your amazing theme and support!

TPSphi

Albert · March 2015

Hi,

1. To change just phone number color please use:

.phone > a { color: #2b4c67;}

2. To do this please add class 'scroll' to classes links

Thanks!

tpsphi · March 2015

GREAT!

All changes worked wonderfully

Thanks again for your awesome theme and support.

I really appreciate all of your help!

TPSphi

Albert · March 2015

You’re welcome

Thanks for choosing Be

tpsphi · March 2015

To 'Be' honest it was an easy choice considering you have every feature under the sun and such great support.

I've been asked to change the 'Have a Question?' text color at the top as well. How would I do that, and also how would I change the social icons beside that text's color as well?

Also how can I change the icon for menus which shows up when its on an iPad or iPhone (which is an icon with 3 lines on top of each other). I'd like it to say 'MENU' instead in capital letters. Do I need to upload an icon? Also can I have the 'Menu' button inside of an actual button (like the 'Book a Session') but as a white button instead with black text. This would be easier for me to see and click.

Thanks again!

TPSphi

Albert · March 2015

Hi,

1. Have a question:

#Action_bar .contact_details li { color: #fff;}

2. Social

#Action_bar .social li a { color: #fff;}
#Action_bar .social li a:hover { color: #ddd;}

3. You can change menu icon to text in
Theme Options > Layout > Menu & Action Bar > Menu | Responsive Button | Text

Thanks!

tpsphi · March 2015

Awesome!

The only part I still need help with is wrapping that Menu text into a button. It's hard to notice right now that you can click on it. I'd like to have a button that appears beside the 'Book a Session' button.

Is that possible?

Thanks!

TPSphi

Albert · March 2015

Hi,

Can you make an image of this change bacause we do not understand exactly how it would look

Thanks!

tpsphi · March 2015

Hi Team!

No problem.

Here is the iPhone mockup: http://bit.ly/1FH48vm

Here is the iPad mockup: http://bit.ly/1Cb66jR

I hope those images help make more sense of the idea. I only want this button to show up when the site can no longer show all of the nav bar items (My Story, Classes etc). It's a bit easier to see then a single icon or a word.

Also, is there a way to turn off the header on the mobile version. As you might notice it gets cut off and looks a little strange. I don't mind the black, but anything you can suggest that would help make it look cleaner would be great!

Thanks again for helping to sort out these adjustments!

I really appreciate it

TPSphi

Albert · March 2015

To make menu button, instead of text, please use below css:

#Top_bar a.responsive-menu-toggle {
    background: #cccccc;
    color: #222222;
    height: auto !important;
    padding: 11px 20px;
    right: -20px !important;
    top: 8px !important;
}
#Top_bar a.responsive-menu-toggle span {
    float: none !important;
    line-height: 0 !important;
    padding: 0 !important;
}

@media only screen and (max-width: 767px){
    #Wrapper #Top_bar a.responsive-menu-toggle {
        right: 160px !important;
        top: 74px !important;
    }
}

tpsphi · March 2015

AMAZING!!!!!!!!!!!!!!

You might want to even consider adding that code to the interface as an option for others to leverage. You could even have it so the button has an icon (with the 3 lines). I know you're always looking for opportunities to enhance the system, so perhaps others might like that tweak too.

At any rate, I tested it and it works great.

Only one issue. In the iPhone mode when I click on the button the menu overlaps with the button. How would I adjust that?

Here is a screenshot: http://bit.ly/1901rHb

Thanks amazing Team!!

TPSphi

Albert · March 2015

To move this menu a little bit down as well, please use below css:

@media only screen and (max-width: 767px) {
    #Header #menu {
        margin-top: 50px;
    }
}

tpsphi · March 2015

It works wonderfully!!

Thanks again for all your support

YOU ALL ROCK!

TPSphi

Albert · March 2015

It's great to hear this

You're welcome!

bomerang · April 2015

@muffingroup

How to add a botton to the menu like on http://themes.muffingroup.com/be/itservice/ ?

Thanks for an amazing theme!

Albert · April 2015

@bomerang This can be done under Theme options > Layout > Header section. This is "Action button".

Help needed tweaking some things that look strange...

Comments