Mobile header & Phone & Mobile Menu

Support Area Forums Bottega Mobile header & Phone & Mobile Menu

Viewing 4 posts - 1 through 4 (of 4 total)
URL to the page in question: http://www.squeakyccs.com/
  • Author
    Posts
  • #28104
    Avatar photoDurenda Wood
    Participant

    Hello! 🙂

    I replaced the head background image with writing and different color. What I would like to do on a mobile view is to not have that image show and to have the phone move below the logo. A great example is http://piccadillyusa.com/ which is a Bottega theme.

    I do have this in the custom css under advance
    #phone-number {
    position: absolute;
    top: 69px;
    right: 20px;
    font-size: 20px;
    }

    I installed tinynav and in the Custom id/class ( use # and . ): I put this in the input box ul#menu-menu2
    Then I checked the view port to add the code to the header file. It did not change the mobile menu. I actually like how it is on the http://piccadillyusa.com/.

    Thanks in advance for your help!

    Durenda

    #28116
    Avatar photoDurenda Wood
    Participant

    I just tried to add an image to a blog page and it is not showing the image.

    #28134
    Avatar photoDurenda Wood
    Participant

    Something else is I do not want the featured image to show on the blog page.

    #28180
    Bill Robbins
    Moderator

    Hello Durenda,

    I’m going to start with your second question. When a page is designated as the “posts” page in the WordPress admin, the only thing you can then adjust about the page is the title and the URL slug. Everything else — featured images, format and so on, will be ignored. So it’s not actually possible to add in a header image on the blog page.


    It looks like the ID of your navigation menu is #menu-navbar1 (this line in your source code: <ul id="menu-navbar1" class="menu">).


    What you want to do is set a media query that begins at 1023px wide. That’s the point at where we rearrange the header. You need to set the #header to not have a background image at that point, but to have a solid color. That will take care of the writing for you.

    After that you need set the phone number to have a relative position and remove the top/right values so it falls in place. To center it, we’ll make the div that holds then number full width with centered text.

    Give this a shot:

    
    @media only screen and (max-width: 1023px) {
    
    	#header div#phone-number {
    		position: relative;
    		left: auto;
    		right: auto;
    		top: auto;
    		bottom: auto;
    		width: 100%;
    		text-align: center;
    	}
    	
    	#header {
    		background: none #320013 !important;
    	}
    
    }
    

    Take care,
    Bill

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Mobile header & Phone & Mobile Menu’ is closed to new replies.